From 57d7282ead4cee346e17eb50d8e047c945221c66 Mon Sep 17 00:00:00 2001
From: Avik-creator <avikm744@gmail.com>
Date: Fri, 15 Nov 2024 21:11:34 +0530
Subject: [PATCH] FEAT: Added Spacing Between the Selected Configuration.

---
 src/components/Installer/index.jsx         | 70 ++++++++++++----------
 src/components/Installer/styles.module.css | 15 +++++
 2 files changed, 52 insertions(+), 33 deletions(-)

diff --git a/src/components/Installer/index.jsx b/src/components/Installer/index.jsx
index 61053b0..f26bf60 100644
--- a/src/components/Installer/index.jsx
+++ b/src/components/Installer/index.jsx
@@ -1,54 +1,54 @@
-import React, { useState } from "react";
-import styles from "./styles.module.css";
+import React, { useState } from 'react';
+import styles from './styles.module.css';
 
 export default function CondaInstallerSelector() {
-  const [os, setOs] = useState("");
-  const [arch, setArch] = useState("");
-  const [installerType, setInstallerType] = useState("");
+  const [os, setOs] = useState('');
+  const [arch, setArch] = useState('');
+  const [installerType, setInstallerType] = useState('');
 
   const osArchitectures = {
-    Linux: ["x64", "aarch64", "ppc64le"],
-    macOS: ["x64", "ARM64"],
-    Windows: ["x64", "ARM64 (Beta)"],
+    Linux: ['x64', 'aarch64', 'ppc64le'],
+    macOS: ['x64', 'ARM64'],
+    Windows: ['x64', 'ARM64 (Beta)'],
   };
 
   const installerData = {
     Anaconda: {
-      name: "Anaconda Distribution",
-      url: "https://docs.anaconda.com/anaconda/install/index.html",
-      defaultChannel: "defaults",
-      description: "A Python/R data science distribution containing conda",
+      name: 'Anaconda Distribution',
+      url: 'https://docs.anaconda.com/anaconda/install/index.html',
+      defaultChannel: 'defaults',
+      description: 'A Python/R data science distribution containing conda',
     },
     Miniconda: {
-      name: "Miniconda",
-      url: "https://docs.anaconda.com/miniconda/index.html",
-      defaultChannel: "defaults",
-      description: "Minimal installation of Anaconda Distribution",
+      name: 'Miniconda',
+      url: 'https://docs.anaconda.com/miniconda/index.html',
+      defaultChannel: 'defaults',
+      description: 'Minimal installation of Anaconda Distribution',
     },
     Miniforge: {
-      name: "Miniforge",
-      url: "https://github.com/conda-forge/miniforge",
-      defaultChannel: "conda-forge",
-      description: "Community-driven minimal installer using conda-forge",
+      name: 'Miniforge',
+      url: 'https://github.com/conda-forge/miniforge',
+      defaultChannel: 'conda-forge',
+      description: 'Community-driven minimal installer using conda-forge',
     },
     Micromamba: {
-      name: "Micromamba",
-      url: "https://mamba.readthedocs.io/en/latest/installation.html#micromamba",
-      defaultChannel: "conda-forge",
-      description: "Standalone fast package manager (no conda required)",
+      name: 'Micromamba',
+      url: 'https://mamba.readthedocs.io/en/latest/installation.html#micromamba',
+      defaultChannel: 'conda-forge',
+      description: 'Standalone fast package manager (no conda required)',
       isStandalone: true,
     },
     Pixi: {
-      name: "Pixi",
-      url: "https://prefix.dev/docs/pixi/installation",
-      defaultChannel: "conda-forge",
-      description: "Modern package management solution for Python, C++, and R",
+      name: 'Pixi',
+      url: 'https://prefix.dev/docs/pixi/installation',
+      defaultChannel: 'conda-forge',
+      description: 'Modern package management solution for Python, C++, and R',
       isStandalone: true,
     },
   };
 
   const getInstallerDetails = () => {
-    if (!os || !installerType) {
+    if (!os || !installerType || !arch) {
       return null;
     }
     return installerData[installerType];
@@ -67,7 +67,7 @@ export default function CondaInstallerSelector() {
         <div className={styles.form_group}>
           <div>
             <label htmlFor="os-select" className={styles.label}>
-              {" "}
+              {' '}
               Operating System
             </label>
             <select
@@ -75,7 +75,7 @@ export default function CondaInstallerSelector() {
               value={os}
               onChange={(e) => {
                 setOs(e.target.value);
-                setArch("");
+                setArch('');
               }}
               className={styles.select}
             >
@@ -91,7 +91,7 @@ export default function CondaInstallerSelector() {
           {os && (
             <div>
               <label htmlFor="arch-select" className={styles.label}>
-                {" "}
+                {' '}
                 Architecture
               </label>
               <select
@@ -112,7 +112,7 @@ export default function CondaInstallerSelector() {
 
           <div>
             <label htmlFor="installer-select" className={styles.label}>
-              {" "}
+              {' '}
               Installer Type
             </label>
             <select
@@ -137,20 +137,24 @@ export default function CondaInstallerSelector() {
                 <ul className={styles.details_list}>
                   <li>
                     OS:
+                    {' '}
                     {os}
                   </li>
                   {arch && (
                     <li>
                       Architecture:
+                      {' '}
                       {arch}
                     </li>
                   )}
                   <li>
                     Installer:
+                    {' '}
                     {installerDetails.name}
                   </li>
                   <li>
                     Default Channel:
+                    {' '}
                     {installerDetails.defaultChannel}
                   </li>
                 </ul>
diff --git a/src/components/Installer/styles.module.css b/src/components/Installer/styles.module.css
index ef2e704..438d122 100644
--- a/src/components/Installer/styles.module.css
+++ b/src/components/Installer/styles.module.css
@@ -47,6 +47,7 @@
   border-radius: 4px;
 }
 
+
 .details_list {
   margin-top: 0.5rem;
   padding-left: 1.5rem;
@@ -65,3 +66,17 @@
   background-color: #e8f0fe;
   border-radius: 4px;
 }
+
+@media(prefers-color-scheme: dark){
+    .details_wrapper {
+        background-color: #0f6c12;
+        color: white;
+    }
+
+    .link {
+        color: white;
+        display: inline-block;
+        margin-top: 0.5rem;
+         text-decoration: underline;
+    }
+}