Repository: isucon/isucon11-qualify (language: go)

Issue:
[frontend]エラーカラーの導入
- [ ] 詳細の「削除」ボタン
- [ ] 名前変更の「×」ボタン



Discussion / hints:

Fix patch:
diff --git a/webapp/frontend/src/App.tsx b/webapp/frontend/src/App.tsx
index 89923cc2c..c677286ec 100644
--- a/webapp/frontend/src/App.tsx
+++ b/webapp/frontend/src/App.tsx
@@ -13,7 +13,7 @@ const App = () => {
     <div className="flex flex-col min-h-full text-primary">
       <BrowserRouter>
         <PageHeader></PageHeader>
-        <div className="flex-1 bg-teritary">
+        <div className="flex-1 bg-primary">
           <Switch>
             <GuardedRoute path="/" exact>
               <Home />
diff --git a/webapp/frontend/src/components/Condition/Tip.tsx b/webapp/frontend/src/components/Condition/Tip.tsx
index a45a830db..543767bbf 100644
--- a/webapp/frontend/src/components/Condition/Tip.tsx
+++ b/webapp/frontend/src/components/Condition/Tip.tsx
@@ -6,13 +6,13 @@ const Tip = ({ variant }: Props) => {
   const color = (() => {
     switch (variant) {
       case 'info':
-        return 'bg-status-info'
+        return 'bg-status-info text-status-info'
       case 'warning':
-        return 'bg-status-warning'
+        return 'bg-status-warning text-status-warning'
       case 'sitting':
-        return 'bg-status-sitting'
+        return 'bg-status-sitting text-status-sitting'
       case 'critical':
-        return 'bg-status-critical'
+        return 'bg-status-critical text-status-critical'
     }
   })()
   const className = `h-8 rounded-2xl py-1 px-4 font-medium text-center ${color}`
diff --git a/webapp/frontend/src/components/Isu/TabLink.tsx b/webapp/frontend/src/components/Isu/TabLink.tsx
index 2616e749f..bae1203fd 100644
--- a/webapp/frontend/src/components/Isu/TabLink.tsx
+++ b/webapp/frontend/src/components/Isu/TabLink.tsx
@@ -13,7 +13,7 @@ const TabLink = ({ to, label }: Props) => {
     <div
       className={`w-16 flex justify-center ${
         isSelected
-          ? 'border-b-2 text-accent-primary border-accent-primary'
+          ? 'border-b-2 text-accent-primary border-accent-primary font-bold'
           : 'text-secondary'
       }`}
     >
diff --git a/webapp/frontend/src/components/IsuDetail/MainInfo.tsx b/webapp/frontend/src/components/IsuDetail/MainInfo.tsx
index 10118f2c1..f9d6c6427 100644
--- a/webapp/frontend/src/components/IsuDetail/MainInfo.tsx
+++ b/webapp/frontend/src/components/IsuDetail/MainInfo.tsx
@@ -35,7 +35,7 @@ const MainInfo = ({ isu, setIsu }: Props) => {
           <div className="flex flex-no-wrap gap-4 justify-self-end mt-12">
             <IconInput putIsuIcon={putIsuIcon} />
             <button
-              className="px-3 py-1 text-white-primary bg-button rounded"
+              className="px-3 py-1 text-error border border-error rounded"
               onClick={deleteIsu}
             >
               削除
diff --git a/webapp/frontend/src/components/IsuDetail/NameEdit.tsx b/webapp/frontend/src/components/IsuDetail/NameEdit.tsx
index 3fb40afa8..ac69f6e53 100644
--- a/webapp/frontend/src/components/IsuDetail/NameEdit.tsx
+++ b/webapp/frontend/src/components/IsuDetail/NameEdit.tsx
@@ -51,10 +51,7 @@ const FinishEditButtons = ({
       <button onClick={confirmEdit} className="focus:outline-none">
         <HiOutlineCheck size="20" />
       </button>
-      <button
-        onClick={finishEdit}
-        className="text-accent-primary focus:outline-none"
-      >
+      <button onClick={finishEdit} className="text-error focus:outline-none">
         <IoMdClose size="20" />
       </button>
     </div>
diff --git a/webapp/frontend/src/components/PageHeader/ControlItem.tsx b/webapp/frontend/src/components/PageHeader/ControlItem.tsx
index c6f6b41c8..b2a153363 100644
--- a/webapp/frontend/src/components/PageHeader/ControlItem.tsx
+++ b/webapp/frontend/src/components/PageHeader/ControlItem.tsx
@@ -1,5 +1,5 @@
 const ControlItem = ({ children }: { children: JSX.Element }) => {
-  return <div className="mr-4">{children}</div>
+  return <div className="mr-4 text-white-primary font-bold">{children}</div>
 }
 
 export default ControlItem
diff --git a/webapp/frontend/src/components/PageHeader/PageHeader.tsx b/webapp/frontend/src/components/PageHeader/PageHeader.tsx
index 2c664fca2..3df20739d 100644
--- a/webapp/frontend/src/components/PageHeader/PageHeader.tsx
+++ b/webapp/frontend/src/components/PageHeader/PageHeader.tsx
@@ -4,7 +4,7 @@ import logo_white from '/@/assets/logo_white.svg'
 
 const PageHeader = () => {
   return (
-    <header className="h-14 flex items-center p-2 bg-primary">
+    <header className="h-14 flex items-center p-2 bg-accent-primary">
       <Link to="/">
         <img
           src={logo_white}
diff --git a/webapp/frontend/tailwind.config.js b/webapp/frontend/tailwind.config.js
index d1c4bd871..cdf2f5b53 100644
--- a/webapp/frontend/tailwind.config.js
+++ b/webapp/frontend/tailwind.config.js
@@ -2,10 +2,11 @@ module.exports = {
   theme: {
     backgroundColor: theme => ({
       ...theme('colors'),
-      primary: '#EF724A',
+      primary: '#F3F4F5',
       secondary: '#FFFFFF',
       teritary: '#F1F1F1',
       button: '#21394B',
+      'accent-primary': '#FF6433',
       'status-info': '#94EFBC',
       'status-warning': '#FFEF5B',
       'status-sitting': '#FFBC7E',
@@ -15,14 +16,20 @@ module.exports = {
       ...theme('colors'),
       primary: '#241E12',
       secondary: '#6B6965',
+      error: '#CF1717',
       'white-primary': '#FFFFFF',
       'white-secondary': '#FFFFFF',
-      'accent-primary': '#EF724A'
+      'accent-primary': '#FF6433',
+      'status-info': '#22623E',
+      'status-warning': '#605910',
+      'status-sitting': '#603A18',
+      'status-critical': '#512424'
     }),
     borderColor: theme => ({
       ...theme('colors'),
       outline: '#E1E5E6',
-      'accent-primary': '#EF724A'
+      error: '#CF1717',
+      'accent-primary': '#FF6433'
     }),
     extend: {
       gridTemplateColumns: {


Test patch: