clolours not set with variables

Author: adamhindry

app/frontend/src/components/AnalysisPanel/AnalysisPanel.module.css

@@ -15,7 +15,7 @@
     margin: auto;
     margin-left: 1.25em;
     min-height: 3.125em;
-    border-left: 0.0625em solid #2997b1;
+    border-left: 0.0625em solid var(--primary-dark);
     padding: 0 0 1.875em 1.875em;
     position: relative;
 }
@@ -31,25 +31,25 @@
     content: " ";
     border: 8px solid #d1dbfa;
     border-radius: 500%;
-    background: #2997b1;
+    background: var(--primary-dark);
     height: 20px;
     width: 20px;
 }
 
 .tStep {
-    color: #2997b1;
+    color: var(--primary-dark);
     position: relative;
     font-size: 0.875em;
     margin-bottom: 0.5em;
 }
 
 .tCodeBlock {
     max-height: 18.75em;
-    background: white !important;
+    background: var(--background) !important;
 }
 
 .tProp {
-    background-color: rgb(245, 245, 245);
+    background-color: var(--background);
     color: #333232;
     font-size: 0.75em;
     padding: 0.1875em 0.625em;
@@ -62,3 +62,7 @@
     max-width: 100%;
     object-fit: contain;
 }
+
+.root-131 {
+    color: var(--primary-dark) !important;
+}

app/frontend/src/components/Answer/Answer.module.css

@@ -54,8 +54,8 @@ h2 {
     text-align: center;
     border-radius: 0.25em;
     padding: 0em 0.5em;
-    background: #eaf5f7;
-    color: #123bb6;
+    background: var(--user-chat-bubble);
+    color: var(--link);
     text-decoration: none;
     cursor: pointer;
 }
@@ -80,7 +80,7 @@ h2 {
     text-align: center;
     border-radius: 0.25em;
     padding: 0em 0.5em;
-    background: #eaf5f7;
+    background: var(--user-chat-bubble);
     color: black;
     font-style: italic;
     text-decoration: none;
@@ -109,8 +109,8 @@ sup {
     min-width: 0.875em;
     height: 0.875em;
     border-radius: 0.1875em;
-    background: #eaf5f7;
-    color: #123bb6;
+    background: var(--user-chat-bubble);
+    color: var(--link);
     text-decoration-color: transparent;
     outline: transparent solid 0.0625em;
     cursor: pointer;
@@ -125,7 +125,7 @@ sup {
 }
 
 .disclaimer {
-    background-color: #f5dfe3;
+    background-color: var(--disclaimer);
     padding: 1rem 1rem;
     border-radius: 0.4rem;
 }

app/frontend/src/components/DislaimerModal/Modal.css

@@ -22,12 +22,12 @@
 
 .dialog-title,
 .dialog-content {
-    color: black;
+    color: var(--feedback-button);
 }
 
 .dialog-surface .tcmodal-button {
     align-self: flex-end;
-    background-color: #33bfc7;
+    background-color: var(--primary-colour);
     border: none;
     outline: none;
     border-radius: 0.3rem;
@@ -43,7 +43,7 @@
 }
 
 .dialog-surface .tcmodal-button:hover {
-    background-color: #2a9c9f;
+    background-color: var(--primary-dark);
     transform: translateY(-0.03125rem);
 }
 
@@ -62,7 +62,7 @@
 
 #my-dialog-surface {
     border-radius: 0.5rem;
-    background-color: white;
+    background-color: var(--background);
     box-shadow:
         0px 0.5rem 1rem rgba(0, 0, 0, 0.24),
         0px 0px 0.125rem rgba(0, 0, 0, 0.2);

app/frontend/src/components/Example/Example.module.css

@@ -10,7 +10,7 @@
 }
 
 .exampleQuestion {
-    background: white;
+    background: var(--background);
     border-radius: 0.5rem;
     display: flex;
     flex-direction: column;
@@ -22,7 +22,7 @@
 }
 
 .exampleOther {
-    background: white;
+    background: var(--background);
     border-radius: 0.5rem;
     display: flex;
     flex-direction: column;
@@ -34,7 +34,7 @@
 }
 
 .exampleContainer {
-    background-color: #f7f7f7;
+    background-color: var(--example-container);
     border-radius: 0.5rem;
     padding: 0.5rem;
     box-shadow:
@@ -46,7 +46,7 @@
     box-shadow:
         0rem 0.5rem 1rem rgba(0, 0, 0, 0.14),
         0rem 0rem 0.125rem rgba(0, 0, 0, 0.12);
-    outline: 0.125rem solid rgb(41, 151, 177);
+    outline: 0.125rem solid var(--primary-colour);
 }
 
 .exampleText {

app/frontend/src/components/FeedbackButton/FeedbackButton.css

@@ -1,5 +1,5 @@
 #FeedbackButton {
-    background-color: black;
+    background-color: var(--feedback-button);
     border-radius: 0.5rem;
-    border-color: black;
+    border-color: var(--feedback-button);
 }

app/frontend/src/components/MarkdownViewer/MarkdownViewer.module.css

@@ -8,19 +8,19 @@
     box-shadow:
         #0000000d 0 0 0 0.0625em,
         #0000001a 0 0.125em 0.1875em;
-    background-color: white;
+    background-color: var(--background);
     margin: 1.25em 0;
 }
 
 .loading {
     padding: 6.25em;
     height: 100vh;
-    background-color: white;
+    background-color: var(--background);
 }
 
 .error {
     height: 100vh;
-    background-color: white;
+    background-color: var(--background);
 }
 
 .markdown {

app/frontend/src/components/QuestionInput/QuestionInput.module.css

@@ -5,7 +5,7 @@
         0px 0px 0.125rem rgba(0, 0, 0, 0.12);
     width: 100%;
     padding: 0.8rem;
-    background: white;
+    background: var(--background);
 }
 
 .questionInputTextArea {

app/frontend/src/components/UserChatMessage/UserChatMessage.module.css

@@ -8,7 +8,7 @@
 
 .message {
     padding: 1.25em;
-    background: #eaf5f7;
+    background: var(--user-chat-bubble);
     border-radius: 0.5em;
     box-shadow:
         0px 0.125em 0.25em rgba(0, 0, 0, 0.14),

app/frontend/src/index.css

@@ -26,8 +26,16 @@ body {
     padding: 0;
 }
 
-#root {
+:root {
     height: 100%;
+    --primary-colour: #3ce2db;
+    --feedback-button: black;
+    --disclaimer: #f5dfe3;
+    --user-chat-bubble: #eaf5f7;
+    --background: white;
+    --example-conatianer: #f7f7f7;
+    --primary-dark: #2997b1;
+    --link: #123bbb;
 }
 
 @media (min-width: 480px) {

app/frontend/src/pages/chat/Chat.module.css

@@ -87,7 +87,6 @@
     padding: 1rem;
     width: 100%;
     max-width: 64.25rem;
-    /* background: #f2f2f2; */
 }
 
 .chatAnalysisPanel {