Merge pull request #53 from curest0x1021/dev

Fix css issue
deletedcu · Oct 18, 2022 · adc1243 · adc1243
2 parents 3184549 + 84a18c1
commit adc1243
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 23 deletions.
diff --git a/app/src/components/TagList.tsx b/app/src/components/TagList.tsx
@@ -24,7 +24,7 @@ export default function TagList(props: TagListProps) {
           </div>
         )
       ) : (
-        <div className="border-b bg-fill-secondary px-8 py-4 text-center text-color-third">
+        <div className="border-b border-skin-primary bg-fill-secondary px-8 py-4 text-center text-color-third">
           Connect your wallet to start tweeting...
         </div>
       )}

diff --git a/app/src/components/TweetForm.tsx b/app/src/components/TweetForm.tsx
@@ -117,7 +117,7 @@ export default function TweetForm({
           </div>
         </form>
       ) : (
-        <div className="border-b bg-curent px-8 py-4 text-center text-color-secondary">
+        <div className="border-b border-skin-primary bg-curent px-8 py-4 text-center text-color-secondary">
           Connect your wallet to start tweeting...
         </div>
       )}

diff --git a/app/src/components/UserEditModal.tsx b/app/src/components/UserEditModal.tsx
@@ -90,7 +90,7 @@ export default function UserEditModal({
                   <form onSubmit={handleSubmit(onSubmit)}>
                     <div className="flex flex-col">
                       <div className="mt-1 flex rounded-md shadow-sm">
-                        <span className="inline-flex items-center rounded-l-md border border-r-0 border-skin-primary bg-fill-secondary px-3 text-sm text-color-third">
+                        <span className="inline-flex items-center rounded-l-md border border-r-0 border-skin-primary bg-fill-secondary px-3 text-sm text-color-secondary">
                           <svg
                             xmlns="http://www.w3.org/2000/svg"
                             className="h-5 w-5 iconify iconify--heroicons-outline"

diff --git a/app/src/components/UserList.tsx b/app/src/components/UserList.tsx
@@ -98,7 +98,7 @@ export default function UserList(props: UserListProps) {
           </div>
         )
       ) : (
-        <div className="border-b bg-fill-secondary px-8 py-4 text-center text-color-third">
+        <div className="border-b border-skin-primary bg-fill-secondary px-8 py-4 text-center text-color-third">
           Connect your wallet to start tweeting...
         </div>
       )}

diff --git a/app/src/styles/globals.css b/app/src/styles/globals.css
@@ -10,21 +10,23 @@
     --fill-color-primary: 255 255 255;
     --fill-color-secondary: 243 244 246;
     --fill-color-third: 229 231 235;
-    --fill-color-opacity: 209, 213, 219;
-    --border-color: 156, 163, 175;
+    --fill-opacity: 0.3;
+    --border-color: 156 163 175;
+    --border-opacity: 0.3;
     --focus-color: 107 114 128;
   }
 
   .theme-dark {
-    --text-color-primary: 148 163 184;
-    --text-color-secondary: 100 116 139;
-    --text-color-third: 71 85 105;
-    --fill-color-primary: 15 23 42;
-    --fill-color-secondary: 30 41 59;
-    --fill-color-third: 51, 65, 85;
-    --fill-color-opacity: 51, 65, 85;
-    --border-color: 51, 65, 85;
-    --focus-color: 100 116 139;
+    --text-color-primary: 163 163 163;
+    --text-color-secondary: 115 115 115;
+    --text-color-third: 82 82 82;
+    --fill-color-primary: 23 23 23;
+    --fill-color-secondary: 38 38 38;
+    --fill-color-third: 64 64 64;
+    --fill-opacity: 0.3;
+    --border-color: 82 82 82;
+    --border-opacity: 0.3;
+    --focus-color: 115 115 115;
   }
 }
 

diff --git a/app/tailwind.config.js b/app/tailwind.config.js
@@ -23,7 +23,11 @@ module.exports = {
           800: mainColor[800],
           900: mainColor[900],
         },
-        focus: "rgb(var(--focus-color))"
+        focus: "rgb(var(--focus-color))",
+        skin: {
+          primary: "rgb(var(--border-color) / var(--border-opacity))",
+          secondary: "rgb(var(--focus-color))",
+        },
       },
       textColor: {
         color: {
@@ -37,15 +41,9 @@ module.exports = {
           primary: "rgb(var(--fill-color-primary))",
           secondary: "rgb(var(--fill-color-secondary))",
           third: "rgb(var(--fill-color-third))",
-          opacity: "rgba(var(--fill-color-opacity), 0.2)",
+          opacity: "rgb(var(--fill-color-third) / var(--fill-opacity))",
         },
       },
-      borderColor: {
-        skin: {
-          primary: "rgba(var(--border-color), 0.3)",
-          secondary: "rgb(var(--focus-color))"
-        }
-      }
     },
   },
   plugins: [