Minor styling fixes for About modal

Signed-off-by: Anil Vishnoi <vishnoianil@gmail.com>
instructlab · Sep 25, 2024 · 82b0c68 · 82b0c68
1 parent 1e85ddd
commit 82b0c68
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 31 deletions.
diff --git a/src/components/AboutModal/AboutModal.tsx b/src/components/AboutModal/AboutModal.tsx
@@ -1,20 +1,20 @@
 import { useCallback, type Dispatch, type SetStateAction } from 'react';
-import { AboutModal as PatternflyAboutModal } from '@patternfly/react-core/dist/esm/components/AboutModal';
 import { Text, TextContent, TextVariants } from '@patternfly/react-core/dist/dynamic/components/Text';
 import { Button } from '@patternfly/react-core/dist/dynamic/components/Button';
 import GithubIcon from '@patternfly/react-icons/dist/dynamic/icons/github-icon';
 import InstructLabLogo from '../../../public/updated-logo.png';
 import InstructLabAboutUsBg from '../../../public/InstructLab-About-Modal-Background.svg';
 import styles from './about-modal.module.css';
 import { linksData } from './data/linksData';
+import { AboutModal } from '@patternfly/react-core/dist/esm/components/AboutModal';
 
-const AboutModal = ({ isOpen, setIsOpen }: AboutModalProps) => {
+const AboutInstructLab = ({ isOpen, setIsOpen }: AboutModalProps) => {
   const handleClose = useCallback(() => {
     setIsOpen(false);
   }, [setIsOpen]);
 
   return (
-    <PatternflyAboutModal
+    <AboutModal
       className={styles.modal}
       isOpen={isOpen}
       onClose={handleClose}
@@ -26,11 +26,13 @@ const AboutModal = ({ isOpen, setIsOpen }: AboutModalProps) => {
       <div className={styles.modalContent}>
         <div>
           <TextContent>
-            <Text component={TextVariants.h1} className={styles.heading}>
+            <Text className={styles.aboutInstructlab}>
               About InstructLab
             </Text>
+            </TextContent>
+            <TextContent>
             <Text className={styles.description}>
-              InstructLab is an open source AI project that allows you to shape the future of Large Language Models. Join the community to start
+              InstructLab is an open source AI project that allows <br /> you to shape the future of Large Language Models.<br /> Join the community to start
               contributing today.
             </Text>
           </TextContent>
@@ -49,11 +51,11 @@ const AboutModal = ({ isOpen, setIsOpen }: AboutModalProps) => {
         </div>
         <TextContent>
           <Text className={styles.version} component={TextVariants.p}>
-            © InstructLab | Version 1.0.0
+            © InstructLab | Version 1.0.0 Beta
           </Text>
         </TextContent>
       </div>
-    </PatternflyAboutModal>
+    </AboutModal>
   );
 };
 
@@ -62,4 +64,4 @@ type AboutModalProps = {
   setIsOpen: Dispatch<SetStateAction<boolean>>;
 };
 
-export default AboutModal;
+export default AboutInstructLab;
diff --git a/src/components/AboutModal/about-modal.module.css b/src/components/AboutModal/about-modal.module.css
@@ -9,10 +9,6 @@
   height: 100%;
 }
 
-.modal > div:last-child > p {
-  display: none;
-}
-
 .modalContent {
   text-align: center;
   height: 100% !important;
@@ -23,39 +19,43 @@
   visibility: hidden;
 }
 
-.heading {
-  font-weight: medium;
-  font-size: 28pt;
-  color: #dededd;
+.modal button {
+  background: #030303 !important;
+  border-radius: 80px !important;
+}
+
+.aboutInstructlab {
+  margin-top: 1rem;
+  color: white;
+  padding: 20px;
+  text-align: center;
+  font-size: xx-large;
 }
 
 .description {
-  width: 70% !important;
-  margin: auto;
-  font-size: 18pt;
-  color: #ffffff;
+  margin-top: 1rem;
+  color: white;
+  padding-bottom: 50px;
+  font-size: x-large;
+  font-style: italic;
+  text-align: center;
 }
 
 .joinCommunityButtonWrapper {
   display: flex;
   justify-content: center;
   margin: 3rem 0;
-  font-size: 16pt;
-  font-weight: medium;
   color: #ffffff;
 }
 
 .joinCommunityButton {
   background: #030303 !important;
-  border-radius: 100px !important;
-  display: flex;
-  align-items: center;
-  gap: 1rem;
+  border-radius: 80px !important;
 }
 
 .joinCommunityButton svg {
-  height: 2rem;
-  width: 2rem;
+  height: 1rem;
+  width: 1.5rem;
 }
 
 .links {

diff --git a/src/components/HelpDropdown/HelpDropdown.tsx b/src/components/HelpDropdown/HelpDropdown.tsx
@@ -4,7 +4,7 @@ import { Dropdown, DropdownItem, DropdownList } from '@patternfly/react-core/dis
 import { MenuToggle, MenuToggleElement } from '@patternfly/react-core/dist/esm/components/MenuToggle';
 import { ExternalLinkAltIcon } from '@patternfly/react-icons/dist/dynamic/icons/external-link-alt-icon';
 import { OutlinedQuestionCircleIcon } from '@patternfly/react-icons/dist/dynamic/icons/outlined-question-circle-icon';
-import AboutModal from '../AboutModal/AboutModal';
+import AboutInstructLab from '../AboutModal/AboutModal';
 
 const HelpDropdown: React.FC = () => {
   const [isOpen, setIsOpen] = useState<boolean>(false);
@@ -57,15 +57,15 @@ const HelpDropdown: React.FC = () => {
             </Flex>
           </DropdownItem>
 
-          <DropdownItem value={1} key="link" to="#tbd">
+          <DropdownItem value={1} key="link" to="https://docs.instructlab.ai" target='_blank' rel="noopener noreferrer" >
             Help
           </DropdownItem>
           <DropdownItem value={2} key="link" to="#about" onClick={handleAboutUsModalOpen}>
             About
           </DropdownItem>
         </DropdownList>
       </Dropdown>
-      <AboutModal isOpen={isAboutModalOpen} setIsOpen={setIsAboutModalOpen} />
+      <AboutInstructLab isOpen={isAboutModalOpen} setIsOpen={setIsAboutModalOpen} />
     </>
   );
 };