remove inline css from cookie

Signed-off-by: Michael Robinson <[email protected]>
MarquezProject · Aug 15, 2023 · 1d7aba1 · 1d7aba1
1 parent 3023736
commit 1d7aba1
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 9 deletions.
diff --git a/src/components/cookie.tsx b/src/components/cookie.tsx
@@ -7,12 +7,12 @@ interface Props {
 
 const CookieBox = ({ onChange}: Props) => {
     return (
-        <div className="fixed bottom-0 left-0 w-full bg-bgalt border-t-2 border-primary p-4 flex flex-wrap items-center justify-between z-50">
-            <div className="flex">
-                <p className="text-color-default mr-2">This website uses cookies to ensure you get the best experience on our website.</p>
-                <Link to="/privacy-policy" className="text-color-1">Privacy policy</Link>
+        <div className="cookie-div">
+            <div className="cookie-inner-div">
+                <p className="cookie-p">This website uses cookies to ensure you get the best experience on our website.</p>
+                <Link to="/privacy-policy" className="cookie-link">Privacy policy</Link>
             </div>
-            <button className="px-3 py-1 rounded bg-bgalt border-2 border-secondary text-color-default hover:border-primary duration-200 transition-all" onClick={onChange}>Accept</button>
+            <button className="cookie-btn" onClick={onChange}>Accept</button>
         </div>
     )
 }

diff --git a/src/style/index.css b/src/style/index.css
@@ -329,7 +329,7 @@ h1, h2, h3, h4, h5, h6 {
     white-space: nowrap;
 }
 
-/* Wall */
+/* Index Wall */
 
 .wall {
     @apply flex relative justify-center items-center overflow-hidden pt-24 px-16;
@@ -367,7 +367,7 @@ h1, h2, h3, h4, h5, h6 {
     @apply mx-5 rounded-full opacity-80 hover:opacity-100 transition duration-500 ease-in-out transform hover:scale-105;
 }
 
-/* About */
+/* Index About */
 
 .about-div {
     @apply border-t-2 border-dashed border-color-2;
@@ -389,7 +389,7 @@ h1, h2, h3, h4, h5, h6 {
     @apply my-5 text-lg px-6;
 }
 
-/* Feature Boxes */
+/* Index Feature Boxes */
 
 .feature-boxes-div {
     @apply border-t-2 border-dashed border-color-2
@@ -447,7 +447,7 @@ h1, h2, h3, h4, h5, h6 {
     @apply py-12 lg:py-14 px-4 lg:w-1/2 w-full order-6 lg:order-6;
 }
 
-/* Blog */
+/* Blog on Index */
 
 .blog-div {
     @apply border-t-2 border-dashed border-color-2;
@@ -493,4 +493,26 @@ h1, h2, h3, h4, h5, h6 {
 
 .not-found-btn {
     @apply text-link;
+}
+
+/* Cookie */
+
+.cookie-div {
+    @apply fixed bottom-0 left-0 w-full bg-bgalt border-t-2 border-primary p-4 flex flex-wrap items-center justify-between z-50;
+}
+
+.cookie-inner-div {
+    @apply flex;
+}
+
+.cookie-p {
+    @apply text-color-default mr-2;
+}
+
+.cookie-link {
+    @apply text-color-1;
+}
+
+.cookie-btn {
+    @apply px-3 py-1 rounded bg-bgalt border-2 border-secondary text-color-default hover:border-primary duration-200 transition-all;
 }