code and error design

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 {

src/contents/code.tsx

+export function Code({children}:{children: React.ReactNode} ){
+
+    return(
+        <div className="codesnippet">
+            <code>
+                {children}
+            </code>
+        </div>
+    )
+}
\ No newline at end of file

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>