refactor: polish portfolio UI semantics

Author: zis3c

components/About/About.tsx

@@ -18,7 +18,7 @@ const About = (): JSX.Element => {
             src="/assets/portfolio/skills/linux-original.svg"
             height={100}
             width={100}
-            objectFit={'contain'}
+            style={{ objectFit: 'contain' }}
             alt={'Kali Linux'}
           />
           <Styled.Figcaption>
@@ -29,37 +29,51 @@ const About = (): JSX.Element => {
         </Styled.Figure>
       </Styled.Header>
       <Styled.InfoWrapper>
-        <Paragraph margin={'1rem 0'}>Kali GNU/Linux Rolling | Xfce 4.18</Paragraph>
         <Paragraph margin={'1rem 0'}>
-          Built by Radzi Zamri (zis3c)
+          Kali GNU/Linux Rolling | Xfce 4.18
         </Paragraph>
+        <Paragraph margin={'1rem 0'}>Built by Radzi Zamri (zis3c)</Paragraph>
         <Paragraph margin={'1rem 0'}>
           Cybersecurity Student | Purple Team
         </Paragraph>
-        <Paragraph margin={'1rem 0'}>
-          CTF Team: Dot Zero
-        </Paragraph>
+        <Paragraph margin={'1rem 0'}>CTF Team: Dot Zero</Paragraph>
         <Paragraph margin={'1rem 0'}>
           Universiti Sultan Azlan Shah (USAS)
         </Paragraph>
         <Paragraph margin={'2rem 0'}>
-          This interactive portfolio simulates a Kali Linux Xfce desktop environment.
-          All features are frontend-only and safe.
+          This interactive portfolio simulates a Kali Linux Xfce desktop
+          environment. All features are frontend-only and safe.
         </Paragraph>
         <Paragraph margin={'1rem 0'}>
-          <Styled.A href={'https://github.com/zis3c'} target="_blank" rel="noopener">
+          <Styled.A
+            href={'https://github.com/zis3c'}
+            target="_blank"
+            rel="noopener"
+          >
             GitHub
           </Styled.A>
           {' · '}
-          <Styled.A href={'https://www.linkedin.com/in/radzizamri/'} target="_blank" rel="noopener">
+          <Styled.A
+            href={'https://www.linkedin.com/in/radzizamri/'}
+            target="_blank"
+            rel="noopener"
+          >
             LinkedIn
           </Styled.A>
           {' · '}
-          <Styled.A href={'https://www.instagram.com/radz.z_/'} target="_blank" rel="noopener">
+          <Styled.A
+            href={'https://www.instagram.com/radz.z_/'}
+            target="_blank"
+            rel="noopener"
+          >
             Instagram
           </Styled.A>
           {' · '}
-          <Styled.A href={'https://www.youtube.com/@zis3c'} target="_blank" rel="noopener">
+          <Styled.A
+            href={'https://www.youtube.com/@zis3c'}
+            target="_blank"
+            rel="noopener"
+          >
             YouTube
           </Styled.A>
         </Paragraph>

components/ContextMenuItem/ContextMenuItem.spec.tsx

@@ -22,7 +22,7 @@ describe('ContextMenuItem', () => {
     });
 
     it('should render correct text content', () => {
-      const contextItemText = wrap.find('p');
+      const contextItemText = wrap.find('span.label');
       expect(contextItemText.text()).toBe('TOMATO');
     });
     it('should not render chevron icon with no hoverMenuItems', () => {
@@ -49,7 +49,7 @@ describe('ContextMenuItem', () => {
     });
 
     it('should render correct text content', () => {
-      const contextItemText = wrap.find('p');
+      const contextItemText = wrap.find('span.label');
       expect(contextItemText.text()).toBe('ASPARAGUS');
     });
     it('should not render chevron icon with no hoverMenuItems', () => {

components/ContextMenuItem/ContextMenuItem.styles.tsx

@@ -18,7 +18,7 @@ export const Container = styled.li<ContainerProps>`
     background: #3e445e;
   }
 
-  p {
+  .label {
     font-size: 11px;
     color: #d0d5dc;
     font-family: 'Inter', 'Noto Sans', sans-serif;

components/ContextMenuItem/ContextMenuItem.tsx

@@ -48,7 +48,7 @@ const ContextMenuItem = ({
       >
         <Styled.TextIconWrapper>
           {withIcon}
-          <p>{text}</p>
+          <span className="label">{text}</span>
         </Styled.TextIconWrapper>
 
         {hoverMenuItems !== undefined && <FiChevronRight className={'icon'} />}

components/DesktopButton/DesktopButton.tsx

@@ -157,7 +157,7 @@ const DesktopButton = ({
                 alt={text}
                 height={iconSize.height}
                 width={iconSize.width}
-                objectFit={'contain'}
+                style={{ objectFit: 'contain' }}
                 quality={100}
               />
             )}

components/DesktopIconButton/DesktopIconButton.tsx

@@ -167,11 +167,11 @@ const DesktopIconButton = ({
                   alt={text}
                   height={iconSize.height}
                   width={iconSize.width}
-                  objectFit={'contain'}
                   quality={100}
                   loading={variant === 'desktop' ? 'lazy' : 'eager'}
                   onLoadingComplete={() => setIsImageLoaded(true)}
                   style={{
+                    objectFit: 'contain',
                     opacity: isImageLoaded ? 1 : 0,
                     transition: 'opacity 160ms ease',
                   }}

components/LoginScreen/LoginScreen.tsx

@@ -116,7 +116,7 @@ const LoginScreen = ({ isVisible, onLoginComplete }: Props): JSX.Element => {
             alt="User avatar"
             width={62}
             height={62}
-            objectFit="cover"
+            style={{ objectFit: 'cover' }}
           />
         </Avatar>
         <Username>zis3c</Username>

components/SystemTray/SystemTray.tsx

@@ -31,7 +31,7 @@ const renderWindowIcon = (iconSrc: string) => {
         alt=""
         width={16}
         height={16}
-        objectFit="contain"
+        style={{ objectFit: 'contain' }}
         quality={100}
       />
     );

components/TechWidget/TechWidget.tsx

@@ -17,7 +17,7 @@ const TechWidget = (): JSX.Element => {
           src={'/assets/portfolio/skills/react-original.svg'}
           height={60}
           width={60}
-          objectFit={'contain'}
+          style={{ objectFit: 'contain' }}
           alt={'Build with React'}
         />
       </Styled.ReactFigure>

components/WeatherWidget/WeatherWidget.spec.tsx

@@ -43,7 +43,7 @@ describe('WeatherWidget', () => {
     expect(text.length).toBe(1);
   });
   it('should render specified temperature', () => {
-    const temperature = wrap.find(Styled.Temperature).find('p');
+    const temperature = wrap.find(Styled.Temperature).find('span').first();
     expect(temperature.text()).toBe('72F');
   });
   it('should render specified humidity', () => {