feat(frontend): new dashboard concept (#82)

This commit is contained in:
sct
2020-09-15 00:09:11 +09:00
committed by GitHub
parent b5e8428a39
commit eae38bb9ec
9 changed files with 100 additions and 81 deletions

View File

@@ -3,7 +3,7 @@ import React from 'react';
const Notifications: React.FC = () => {
return (
<button
className="p-1 text-gray-400 rounded-full hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:shadow-outline focus:text-gray-500"
className="p-1 text-gray-400 rounded-full hover:bg-cool-gray-500 hover:text-white focus:outline-none focus:shadow-outline focus:text-white"
aria-label="Notifications"
>
<svg

View File

@@ -21,7 +21,7 @@ const SearchInput: React.FC = () => {
</div>
<input
id="search_field"
className="block w-full h-full pl-8 pr-3 py-2 rounded-md bg-cool-gray-600 text-white placeholder-gray-300 focus:outline-none focus:placeholder-gray-400 sm:text-sm"
className="block w-full h-full pl-8 pr-3 py-2 rounded-md bg-cool-gray-600 text-white placeholder-gray-300 focus:outline-none focus:placeholder-gray-400 sm:text-base"
placeholder="Search"
type="search"
value={searchValue}

View File

@@ -26,7 +26,7 @@ const UserDropdown: React.FC = () => {
id="user-menu"
aria-label="User menu"
aria-haspopup="true"
onClick={() => setDropdownOpen((state) => !state)}
onClick={() => setDropdownOpen(true)}
>
<img className="h-8 w-8 rounded-full" src={user?.avatar} alt="" />
</button>
@@ -45,28 +45,28 @@ const UserDropdown: React.FC = () => {
ref={dropdownRef}
>
<div
className="py-1 rounded-md bg-white shadow-xs"
className="py-1 rounded-md bg-cool-gray-700 shadow-xs"
role="menu"
aria-orientation="vertical"
aria-labelledby="user-menu"
>
<a
href="#"
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition ease-in-out duration-150"
className="block px-4 py-2 text-sm text-gray-200 hover:bg-gray-600 transition ease-in-out duration-150"
role="menuitem"
>
Your Profile
</a>
<a
href="#"
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition ease-in-out duration-150"
className="block px-4 py-2 text-sm text-gray-200 hover:bg-gray-600 transition ease-in-out duration-150"
role="menuitem"
>
Settings
</a>
<a
href="#"
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition ease-in-out duration-150"
className="block px-4 py-2 text-sm text-gray-200 hover:bg-gray-600 transition ease-in-out duration-150"
role="menuitem"
onClick={() => logout()}
>

View File

@@ -14,7 +14,7 @@ const Layout: React.FC = ({ children }) => {
<div className="flex flex-col w-0 flex-1 md:ml-64 relative mb-16">
<div className="z-10 flex-shrink-0 flex h-16 bg-cool-gray-600 shadow fixed right-0 left-0 md:left-64">
<button
className="px-4 border-r border-gray-200 text-gray-500 focus:outline-none focus:bg-gray-100 focus:text-gray-600 md:hidden"
className="px-4 border-r border-gray-800 text-gray-200 focus:outline-none focus:bg-gray-300 focus:text-gray-600 md:hidden"
aria-label="Open sidebar"
onClick={() => setSidebarOpen(true)}
>
@@ -46,7 +46,7 @@ const Layout: React.FC = ({ children }) => {
tabIndex={0}
>
<div className="pt-2 pb-6 md:py-6">
<div className="max-w-7xl mx-auto px-4 sm:px-6 md:px-8">
<div className="max-w-8xl mx-auto px-4 sm:px-6 md:px-8">
{children}
</div>
</div>