Merge pull request #49 from cinzlab/ui/enable-colour-schemes

UI/enable colour schemes

Author: adamhindry

app/backend/app.py

@@ -121,19 +121,19 @@ async def favicon():
     return await bp.send_static_file("favicon.ico")
 
 
-@bp.route("/chat.png")
+@bp.route("/logo.png")
 async def chatlogo():
-    return await bp.send_static_file("chat.png")
+    return await bp.send_static_file("logo.png")
 
 
 @bp.route("/CI_Logo_Powered_green.png")
 async def CI_logo():
     return await bp.send_static_file("CI_Logo_Powered_green.png")
 
 
-@bp.route("/chatico.png")
+@bp.route("/icon.png")
 async def chaticon():
-    return await bp.send_static_file("chatico.png")
+    return await bp.send_static_file("icon.png")
 
 
 @bp.route("/assets/<path:path>")

app/frontend/public/chatico.png renamed to app/frontend/public/icon.png

@@ -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/public/chat.png renamed to app/frontend/public/logo.png

@@ -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/AnalysisPanel/AnalysisPanel.module.css

@@ -1,3 +1,3 @@
 export const AnswerIcon = () => {
-    return <img src="/chatico.png" aria-hidden="true" aria-label="Answer logo" style={{ width: "32px", height: "32px", padding: "3px" }} />;
+    return <img src="/icon.png" aria-hidden="true" aria-label="Answer logo" style={{ width: "32px", height: "32px", padding: "3px" }} />;
 };

app/frontend/src/components/Answer/Answer.module.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/Answer/AnswerIcon.tsx

@@ -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/DislaimerModal/Modal.css

@@ -44,7 +44,7 @@ export const Example = ({ exampleType, onClick }: Props) => {
     return (
         <div className={styles.exampleContainer}>
             <div className={styles.header}>
-                <img src="/chatico.png" className={styles.headerImage} />
+                <img src="/icon.png" className={styles.headerImage} />
                 <h3>{exampleType}</h3>
             </div>
             {textList.map((text, index) => {

app/frontend/src/components/Example/Example.module.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);
 }