From ed39197a139c4189e130b78c03e4c5973d2fa76d Mon Sep 17 00:00:00 2001
From: liliana <liliana.sanfilippo@uni-bielefeld.de>
Date: Sat, 20 Jul 2024 15:18:20 +0200
Subject: [PATCH] code and error design

---
 src/App/App.css       | 56 ++++++++++++++++++++++++++++++++++++-------
 src/contents/code.tsx | 10 ++++++++
 src/contents/wiki.tsx | 15 ++++++------
 3 files changed, 66 insertions(+), 15 deletions(-)
 create mode 100644 src/contents/code.tsx

diff --git a/src/App/App.css b/src/App/App.css
index f95db1f2..39c47e9c 100644
--- a/src/App/App.css
+++ b/src/App/App.css
@@ -2,7 +2,7 @@
 /* * COLOURS * */
 /* * * * * * * */
 :root {
-  /* our colours*/
+  /* our colours*/ 
   --text-primary: #850F78; 
   --mediumpurple: #bc15aa; 
   /*--purple: #B85BD1; */
@@ -65,8 +65,20 @@ a {
   text-decoration: none !important;
 }
 
+code{
+  color:black !important;
+}
 
-
+.codesnippet{
+  padding-left: 30px;
+  padding-top: 5px;
+  padding-bottom: 5px;
+  border-radius: 10px;
+  margin-top: 10px;
+  margin-bottom: 15px !important;
+  color: var(--text-primary) !important;
+  background-color: rgb(217, 217, 217);
+}
 /* * * * * * * */
 /* *SIDEBAR* * */
 /* * * * * * * */
@@ -667,16 +679,44 @@ svg{
   -webkit-text-stroke-width: 3px;
   -webkit-text-stroke-color: black;
 }
-
-.error{
-  background-color: lightgray;
+.terminal-box{
+  margin-top: 10px;
+  margin-bottom: 10px;
+  background-color: black;
   border-radius: 10px;
-  color: black;
-  padding-left: 1vw;
-  padding-right: 1vw;
+  color: white;
+  padding-left: 30px;
+  padding-right: 20px;
+  padding-top: 10px;
+  padding-bottom: 10px;
 }
 
+.terminal-box .terminal-error{
+  color: red;
+}
 
+.problem-error::before {
+  background-image: url(https://static.igem.wiki/teams/5247/design/icons/cross-circle.png); 
+  background-size: 20px 20px;
+  content: "";
+  background-repeat: no-repeat;
+  width: 20px; 
+  height: 20px;
+  padding-right: 30px;
+  align-self: center;
+}
+.problem-error{
+  display: inline-flex;
+  margin-top: 10px;
+  margin-bottom: 10px;
+  background-color: black;
+  border-radius: 10px;
+  color: white;
+  padding-left: 30px;
+  padding-right: 20px;
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
 /* TIMELINE EINS */
 
 .timeline-container {
diff --git a/src/contents/code.tsx b/src/contents/code.tsx
new file mode 100644
index 00000000..bf93cbfb
--- /dev/null
+++ b/src/contents/code.tsx
@@ -0,0 +1,10 @@
+export function Code({children}:{children: React.ReactNode} ){
+
+    return(
+        <div className="codesnippet">
+            <code>
+                {children}
+            </code>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/src/contents/wiki.tsx b/src/contents/wiki.tsx
index dd25ebdd..0d50f258 100644
--- a/src/contents/wiki.tsx
+++ b/src/contents/wiki.tsx
@@ -167,6 +167,7 @@ function Started(){
 
 
 import { WikiSelector } from "../components/Filter";
+import { Code } from "./code";
 function Troubleshooting(){
   
   return(
@@ -228,7 +229,7 @@ function Troubleshooting(){
         <Collapsible title="Module Z has already exported a member named A. Consider explicitly re-exporting to resolve the ambiguity.">
         <h6>Example</h6>
         index.tsx: 
-        <p className="error"> Module "./Bfh.tsx" has already exported a member named 'LabTabs'. Consider explicitly re-exporting to resolve the ambiguity.</p>
+        <p className="problem-error"> Module "./Bfh.tsx" has already exported a member named 'LabTabs'. Consider explicitly re-exporting to resolve the ambiguity.</p>
         <h6>Solutions</h6>
         Simply rename the function in one of the modules or consider making it a component if you plan on using it frequently.  
         </Collapsible>
@@ -237,23 +238,23 @@ function Troubleshooting(){
         <Collapsible title="error TS6133: 'event' is declared but its value is never read.">
           <h6>Example</h6>
           HorizontalTimeline.tsx: 
-          <div className="error">
+          <div className="terminal-box">
             $ yarn build
             <p>yarn run v1.22.19</p>
             <p>$ tsc && vite build</p>
-            <p>src/components/HorizontalTimeline.tsx(67,23): error TS6133: 'event' is declared but its value is never read.
+            <p className="terminal-error">src/components/HorizontalTimeline.tsx(67,23): error TS6133: 'event' is declared but its value is never read.
             error Command failed with exit code 2.</p>
             <p>info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.</p>
             </div>
           <p>in</p>
-          <code>
+          <Code>
           const openPop =  (event : React.MouseEvent&lt;HTMLButtonElement, MouseEvent&gt;) =&gt; {}
-          </code>
+          </Code>
           <h6>Solutions</h6>
           <p>Change to: </p>
-          <code>
+          <Code>
           const openPop =  (_event : React.MouseEvent&lt;HTMLButtonElement, MouseEvent&gt;) =&gt; {}
-          </code>
+          </Code>
         </Collapsible>
       </div>
     </div>
-- 
GitLab