From 6a4c9f00d9882b92656675ef6ade1cb71762b0c9 Mon Sep 17 00:00:00 2001
From: Mateusz Tylka <mattyl@st.amu.edu.pl>
Date: Fri, 24 Feb 2023 12:49:38 +0100
Subject: [PATCH] HowTo corrections

---
 src/components/generic/CodeShell.js           | 106 +++++++++---------
 .../HowTo/sections/HowToContent.js            |  11 +-
 2 files changed, 60 insertions(+), 57 deletions(-)

diff --git a/src/components/generic/CodeShell.js b/src/components/generic/CodeShell.js
index 16e2b2a..136ff41 100644
--- a/src/components/generic/CodeShell.js
+++ b/src/components/generic/CodeShell.js
@@ -1,23 +1,23 @@
 import React from 'react';
-import {FlexColumn, Svg} from '../../utils/containers';
+import { FlexColumn, Svg } from '../../utils/containers';
 import styled from 'styled-components';
 import theme from '../../utils/theme';
 import copyIco from '../../assets/copy_ico.svg';
 import checkIco from '../../assets/check_ico.svg';
-import {Body, Code} from '../../utils/fonts';
+import { Body, Code } from '../../utils/fonts';
 
 const CodeShellStyle = styled(FlexColumn)`
   position: relative;
   padding: 24px 14px 14px;
   gap: 8px;
-  background-color: ${({theme}) => theme.colors.dark07};
-  border: 1px solid ${({theme}) => theme.colors.dark};
+  background-color: ${({ theme }) => theme.colors.dark07};
+  border: 1px solid ${({ theme }) => theme.colors.dark};
   border-radius: 4px;
   width: 100%;
   align-items: flex-start;
-  max-width: ${({maxWidth}) => maxWidth ? maxWidth : 'none'};
+  max-width: ${({ maxWidth }) => (maxWidth ? maxWidth : 'none')};
 
-  @media (min-width: ${({theme}) => theme.overMobile}) {
+  @media (min-width: ${({ theme }) => theme.overMobile}) {
     gap: 12px;
     padding: 40px 32px 32px;
   }
@@ -28,59 +28,63 @@ const CopiedMessageStyle = styled(Body)`
   position: absolute;
   top: -24px;
   right: -10px;
-  background-color: ${({theme}) => theme.colors.green};
-  color: ${({theme}) => theme.colors.white};
+  background-color: ${({ theme }) => theme.colors.green};
+  color: ${({ theme }) => theme.colors.white};
   border-radius: 4px;
   padding: 6px;
 `;
 
 const CodeShell = (props) => {
-    const [ico, setIco] = React.useState(copyIco);
+  const [ico, setIco] = React.useState(copyIco);
 
-    const clickCopyButton = () => {
-        let commands = '';
-        if (props.commands.length > 1) {
-            for (let command of props.commands)
-                commands += command + '\n';
-        } else commands = props.commands;
-        navigator.clipboard.writeText(commands).then(r => console.log(r));
-        setIco(checkIco);
-        setTimeout(() => {
-            setIco(copyIco);
-        }, 3000);
-    };
+  const clickCopyButton = () => {
+    let commands = '';
+    if (props.commands.length > 1) {
+      for (let command of props.commands) commands += command + '\n';
+    } else commands = props.commands;
+    navigator.clipboard.writeText(commands).then((r) => console.log(r));
+    setIco(checkIco);
+    setTimeout(() => {
+      setIco(copyIco);
+    }, 2000);
+  };
 
-    const formatCommand = (command) => {
-        if (command[0] === '\t') {
-            return <>&nbsp;&nbsp;&nbsp;&nbsp;{formatCommand(command.slice(1))}</>;
-            /* eslint-disable */
-        } else if (command[0] === '\s') {
-            return <>&nbsp;{formatCommand(command.slice(1))}</>;
-        }
-        return command;
-    };
+  const formatCommand = (command) => {
+    if (command[0] === '\t') {
+      return <>&nbsp;&nbsp;&nbsp;&nbsp;{formatCommand(command.slice(1))}</>;
+    }
+    return command;
+  };
 
-    const renderCommands = () => {
-        return (
-            props.commands.map((command, index) => {
-                return (
-                    <Code key={`command-${props.codeBlockIndex}-${index}`} as='li'
-                          before={!props.disablePrompt}>
-                        {formatCommand(command)}
-                    </Code>
-                );
-            })
-        );
-    };
+  const renderCommands = () => {
+    return props.commands.map((command, index) => {
+      return (
+        <Code
+          key={`command-${props.codeBlockIndex}-${index}`}
+          as="li"
+          before={!props.disablePrompt}
+        >
+          {formatCommand(command)}
+        </Code>
+      );
+    });
+  };
 
-    return (
-        <CodeShellStyle as='ul' maxWidth={props.maxWidth}>
-            <Svg position='absolute' top='12px' right='12px' cursor='pointer'
-                 backgroundColor={theme.colors.white} src={ico} onClick={clickCopyButton}/>
-            {ico === checkIco ? <CopiedMessageStyle>copied!</CopiedMessageStyle> : ''}
-            {renderCommands()}
-        </CodeShellStyle>
-    );
+  return (
+    <CodeShellStyle as="ul" maxWidth={props.maxWidth}>
+      <Svg
+        position="absolute"
+        top="12px"
+        right="12px"
+        cursor="pointer"
+        backgroundColor={theme.colors.white}
+        src={ico}
+        onClick={clickCopyButton}
+      />
+      {ico === checkIco ? <CopiedMessageStyle>copied!</CopiedMessageStyle> : ''}
+      {renderCommands()}
+    </CodeShellStyle>
+  );
 };
 
-export default CodeShell;
\ No newline at end of file
+export default CodeShell;
diff --git a/src/components/specific_challenge/HowTo/sections/HowToContent.js b/src/components/specific_challenge/HowTo/sections/HowToContent.js
index 0715389..8472f2e 100644
--- a/src/components/specific_challenge/HowTo/sections/HowToContent.js
+++ b/src/components/specific_challenge/HowTo/sections/HowToContent.js
@@ -22,9 +22,7 @@ const HowToContent = (props) => {
       return (
         <CodeShell
           codeBlockIndex={0}
-          commands={[
-            props.userFullInfo.individualKey
-          ]}
+          commands={[props.userFullInfo.individualKey]}
         />
       );
     }
@@ -49,7 +47,7 @@ const HowToContent = (props) => {
         <Body as="p" margin="auto 0">
           Create a private git repository with the name
           <Medium as="span">&nbsp;{props.challengeName}</Medium>
-          .&nbsp;The name of the repository must match!
+          &nbsp;The name of the repository must match!
         </Body>
       </Grid>
       <Grid
@@ -59,8 +57,9 @@ const HowToContent = (props) => {
       >
         <CircleNumber number="2" />
         <Body as="p" margin="auto 0">
-          Add the following ssh key <Medium as="span">{props.userFullInfo ? '' : 'REPO_KEY_HERE'}</Medium> to
-          your deploy keys in your git repository settings.
+          Add the following ssh key{' '}
+          <Medium as="span">{props.userFullInfo ? '' : 'REPO_KEY_HERE'}</Medium>{' '}
+          to your deploy keys in your git repository settings.
         </Body>
       </Grid>
       {repoKeyRender()}