attempt #2

Author: sritanmotati

frontend/components/accounts/modals/verification.tsx

@@ -59,7 +59,7 @@ const VerificationModal = (props: VerificationModalProps) => {
     const { show, closeFunc, type, contact, id, mutate } = props;
     const prettyType = type === ContactType.Email ? "Email" : "Phone Number";
     return (
-        <Modal show={show} onClose={closeFunc}>
+        <Modal show={show} onClose={closeFunc} className="verification-modal">
             <Modal.Card>
                 <Modal.Card.Header onClose={closeFunc}>
                     <Modal.Card.Title>

frontend/pages/_app.js

@@ -1,5 +1,6 @@
 import "bulma/css/bulma.min.css";
 import "../styles/globals.css";
+import "../styles/Verification.module.css";
 
 const MyApp = ({ Component, pageProps }) => {
     return <Component {...pageProps} />;

frontend/styles/Verification.module.css

@@ -1,10 +1,10 @@
-.container {
+.verification-modal .container {
   height: 50px;
   width: 300px;
   margin-top: 10px;
 }
 
-.character {
+.verification-modal .character {
   line-height: 50px;
   font-size: 36px;
   color: black;
@@ -14,10 +14,10 @@
   margin-left: 8px;
 }
 
-.character:first-child {
+.verification-modal .character:first-child {
   margin-left: 0;
 }
 
-.character--selected {
+.verification-modal .character--selected {
   border: 1px solid #b0b0b0;
 }

frontend/tsconfig.json

@@ -26,6 +26,6 @@
     "next-env.d.ts",
     "**/*.ts",
     "**/*.tsx",
-    "custom.d.ts"
+    "**/*.css"
   ]
 }