Merge pull request #14 from calimero-network/chore--format-and-style

refactor: format and style
calimero-network · Nov 27, 2024 · b30bafd · b30bafd
2 parents 1732a50 + 305270f
commit b30bafd
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 16 deletions.
diff --git a/src/components/common/input/Styled.ts b/src/components/common/input/Styled.ts
@@ -11,7 +11,11 @@ export const Label = styled.label`
   color: #ffffff;
 `;
 
-export const StyledInput = styled.input<{ $hasError?: boolean; $noMargin?: boolean; $showingCharCount?: boolean }>`
+export const StyledInput = styled.input<{
+  $hasError?: boolean;
+  $noMargin?: boolean;
+  $showingCharCount?: boolean;
+}>`
   width: 100%;
   height: 40px;
   padding: 0 12px;
@@ -26,7 +30,7 @@ export const StyledInput = styled.input<{ $hasError?: boolean; $noMargin?: boole
     border-color 0.15s ease-in-out,
     box-shadow 0.15s ease-in-out;
   box-sizing: border-box;
-  margin-bottom: ${props => {
+  margin-bottom: ${(props) => {
     if (props.$noMargin) return '0';
     if (props.$showingCharCount) return '0';
     return '0.5rem';
@@ -68,10 +72,13 @@ export const ErrorMessage = styled.span`
   margin-top: 0.25rem;
 `;
 
-export const InputContainer = styled.div<{ noMargin?: boolean; showingCharCount?: boolean }>`
+export const InputContainer = styled.div<{
+  noMargin?: boolean;
+  showingCharCount?: boolean;
+}>`
   display: flex;
   flex-direction: column;
-  margin-bottom: ${props => {
+  margin-bottom: ${(props) => {
     if (props.noMargin) return '0';
     if (props.showingCharCount) return '0';
     return '1rem';

diff --git a/src/components/common/input/index.tsx b/src/components/common/input/index.tsx
@@ -7,11 +7,20 @@ interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
   showingCharCount?: boolean;
 }
 
-const Input: React.FC<InputProps> = ({ label, noMargin, showingCharCount, ...props }) => {
+const Input: React.FC<InputProps> = ({
+  label,
+  noMargin,
+  showingCharCount,
+  ...props
+}) => {
   return (
     <InputContainer noMargin={noMargin} showingCharCount={showingCharCount}>
       <Label>{label}</Label>
-      <StyledInput $noMargin={noMargin} $showingCharCount={showingCharCount} {...props} />
+      <StyledInput
+        $noMargin={noMargin}
+        $showingCharCount={showingCharCount}
+        {...props}
+      />
     </InputContainer>
   );
 };

diff --git a/src/components/common/popup/Styled.ts b/src/components/common/popup/Styled.ts
@@ -44,7 +44,7 @@ export const ErrorMessage = styled.p`
 
 export const CharacterCount = styled.small<{ warning: boolean }>`
   display: block;
-  color: ${props => props.warning ? 'orange' : 'inherit'};
+  color: ${(props) => (props.warning ? 'orange' : 'inherit')};
   font-style: italic;
   margin-bottom: 1rem;
 `;
diff --git a/src/components/node/nodeInitPopup/index.tsx b/src/components/node/nodeInitPopup/index.tsx
@@ -21,7 +21,9 @@ interface NodeInitializationPopupProps {
   handleNodeSelect: (nodeName: string) => void;
 }
 
-const NodeInitializationPopup: React.FC<NodeInitializationPopupProps> = ({...props}) => {
+const NodeInitializationPopup: React.FC<NodeInitializationPopupProps> = ({
+  ...props
+}) => {
   const [nodeName, setNodeName] = useState('');
   const [serverPort, setServerPort] = useState('');
   const [swarmPort, setSwarmPort] = useState('');
@@ -49,7 +51,7 @@ const NodeInitializationPopup: React.FC<NodeInitializationPopupProps> = ({...pro
       setTimeout(() => {
         props.handleNodeSelect(nodeName);
         props.onClose();
-      }, 1500); 
+      }, 1500);
     } else {
       setMessage('Error: ' + response.message);
     }

diff --git a/src/components/node/nodeOperations/Styled.ts b/src/components/node/nodeOperations/Styled.ts
@@ -42,12 +42,12 @@ export const Tab = styled.div<{ active: boolean }>`
   cursor: pointer;
   // border: 1px solid #ccc;
   border-bottom: none;
-  background-color: ${props => props.active ? '#000000' : '#2c2c2c'};
-  font-weight: ${props => props.active ? 'bold' : 'normal'};
+  background-color: ${(props) => (props.active ? '#000000' : '#2c2c2c')};
+  font-weight: ${(props) => (props.active ? 'bold' : 'normal')};
   border-radius: 5px 5px 0 0;
   margin-right: 5px;
 
   &:hover {
     background-color: #000000;
   }
-`;
+`;
diff --git a/src/components/node/nodeOperations/index.tsx b/src/components/node/nodeOperations/index.tsx
@@ -97,10 +97,7 @@ const NodeOperations: React.FC<NodeOperationsProps> = ({ ...props }) => {
         >
           Node Logs
         </Tab>
-        <Tab
-          active={false}
-          onClick={openAdminDashboard}
-        >
+        <Tab active={false} onClick={openAdminDashboard}>
           Admin Dashboard
         </Tab>
         <Tab