Fix css

okdonga · Jan 22, 2022 · 2c65356 · 2c65356
1 parent b44141f
commit 2c65356
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 40 deletions.
diff --git a/frontend/src/components/ConnectWallet.js b/frontend/src/components/ConnectWallet.js
@@ -4,28 +4,22 @@ import { NetworkErrorMessage } from "./NetworkErrorMessage";
 
 export function ConnectWallet({ connectWallet, networkError, dismiss }) {
   return (
-    <div className="container">
-      <div className="row justify-content-md-center">
-        <div className="col-12 text-center">
-          {/* Metamask network should be set to Localhost:8545. */}
-          {networkError && (
-            <NetworkErrorMessage 
-              message={networkError} 
-              dismiss={dismiss} 
-            />
-          )}
-        </div>
-        <div className="col-6 p-4 text-center">
+    <main>
+      <div>
+        {/* Metamask network should be set to Localhost:8545. */}
+        {networkError && (
+          <NetworkErrorMessage message={networkError} dismiss={dismiss} />
+        )}
+      </div>
+      <section>
+        <header>
           <p>Please connect to your wallet.</p>
-          <button
-            className="btn btn-warning"
-            type="button"
-            onClick={connectWallet}
-          >
+          <br />
+          <button type="button" onClick={connectWallet}>
             Connect Wallet
           </button>
-        </div>
-      </div>
-    </div>
+        </header>
+      </section>
+    </main>
   );
 }
diff --git a/frontend/src/components/Diet/Diet.css b/frontend/src/components/Diet/Diet.css
@@ -194,3 +194,18 @@ small {
   color: var(--surface1);
   fill: var(--surface3);
 }
+
+.left-align {
+  justify-content: flex-start;
+}
+
+.alert {
+  line-height: var(--space-md);
+  background: var(--surface4);
+  border-radius: var(--space-sm);
+  padding: var(--space-xs) var(--space-md);
+}
+
+.alert__close {
+  margin-inline-start: var(--space-sm);
+}
diff --git a/frontend/src/components/NetworkErrorMessage.js b/frontend/src/components/NetworkErrorMessage.js
@@ -2,11 +2,11 @@ import React from "react";
 
 export function NetworkErrorMessage({ message, dismiss }) {
   return (
-    <div className="alert alert-danger" role="alert">
+    <div role="alert" className="alert">
       {message}
       <button
         type="button"
-        className="close"
+        className="alert__close"
         data-dismiss="alert"
         aria-label="Close"
         onClick={dismiss}

diff --git a/frontend/src/components/NoWalletDetected.js b/frontend/src/components/NoWalletDetected.js
@@ -2,23 +2,21 @@ import React from "react";
 
 export function NoWalletDetected() {
   return (
-    <div className="container">
-      <div className="row justify-content-md-center">
-        <div className="col-6 p-4 text-center">
-          <p>
-            No Ethereum wallet was detected. <br />
-            Please install{" "}
-            <a
-              href="http://metamask.io"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              MetaMask
-            </a>
-            .
-          </p>
-        </div>
-      </div>
-    </div>
+    <main>
+      <section>
+        <p>
+          No Ethereum wallet was detected. <br />
+          Please install{" "}
+          <a
+            href="http://metamask.io"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            MetaMask
+          </a>
+          .
+        </p>
+      </section>
+    </main>
   );
 }
diff --git a/frontend/src/index.css b/frontend/src/index.css
@@ -76,3 +76,14 @@ h3 {
 .left-align {
   justify-content: flex-start;
 }
+
+.alert {
+  line-height: var(--space-md);
+  background: var(--surface4);
+  border-radius: var(--space-sm);
+  padding: var(--space-xs) var(--space-md);
+}
+
+.alert__close {
+  margin-inline-start: var(--space-sm);
+}