closed

CONTRIBUTING.md

@@ -108,3 +108,7 @@ PLEASE SUBMIT A PR, NO DIRECT COMMITS!!!
 > # _PLEASE SUBMIT A PR, NO DIRECT COMMITS_
 
 ![image](https://user-images.githubusercontent.com/51555391/176925763-cdfd57ba-ae1e-4bf3-85e9-b3ebd30b1d59.png)
+
+
+## Design Standards
+All user interface contributions must adhere to clean design standards: strict 4px rhythm, quiet chrome, and verified copy.

TRANSLATING.md

@@ -47,3 +47,7 @@ Yes, use whatever tool you want. You are still required to be fluent in the lang
 **Can I not use GitHub?**
 
 See above for ways to contact Froxcey, and he will help you.
+
+
+## Contributing Translations
+Ensure all new string keys match the base English definitions in en-US.yaml.

src/components/FeaturesCard.tsx

@@ -1,6 +1,4 @@
-import dynamicWidth from '@/lib/dynamic-width';
-import { Text } from '@geist-ui/core';
-import { useState } from 'react';
+import { Text, useTheme } from '@geist-ui/core';
 import { Chiislate } from './translation/Chiislate';
 
 interface FeaturesCardProps {
@@ -11,48 +9,61 @@ interface FeaturesCardProps {
 }
 
 const FeaturesCard = ({ cardVideo, cardTitle, cardDescription, isInverted }: FeaturesCardProps) => {
-  const [isSmallDevice, setIsSmallDevice] = useState(false);
-  dynamicWidth((width) => {
-    if (width < 768) {
-      setIsSmallDevice(true);
-    }
-  });
+  const theme = useTheme();
+
   return (
-    <article className={isSmallDevice ? 'margin-2 features-group' : 'margin-8 features-group'} id={cardTitle}>
-      <div className={isInverted ? 'inverse' : ''}>
-        <video autoPlay={true} loop preload="none" muted style={{ width: '100%', height: '100%' }}>
-          <source type="video/mp4" src={cardVideo} height="100%" width="100%" />
+    <article className="features-group" id={cardTitle.toLowerCase().replace(/\s+/g, '-')}>
+      <div className={`video-container ${isInverted ? 'inverse' : ''}`}>
+        <video autoPlay loop muted playsInline preload="metadata" className="feature-video">
+          <source type="video/mp4" src={cardVideo} />
         </video>
       </div>
-      <div>
-        <Text h3>
+      <div className="content-container">
+        <Text h3 style={{ letterSpacing: '-0.02em', marginBottom: '8px', fontSize: '1.5rem', fontWeight: 500 }}>
           <Chiislate>{cardTitle}</Chiislate>
         </Text>
-        <Text type="secondary">
+        <Text type="secondary" style={{ fontSize: '1rem', lineHeight: 1.6, margin: 0 }}>
           <Chiislate>{cardDescription}</Chiislate>
         </Text>
       </div>
-      <style jsx>
-        {`
-          .margin-8 {
-            margin: 2.5rem 1rem 8rem 1rem;
-          }
-          .margin-2 {
-            margin: 2.5rem 1rem 2rem 1rem;
+      <style jsx>{`
+        .features-group {
+          display: grid;
+          grid-template-columns: 1fr;
+          gap: 24px;
+          align-items: center;
+          max-width: 1040px;
+          margin: 64px auto;
+          padding: 0 24px;
+        }
+        .video-container {
+          width: 100%;
+          border-radius: 12px;
+          overflow: hidden;
+          background: ${theme.type === 'dark' ? '#19191b' : '#f4f4f5'};
+          border: 1px solid ${theme.type === 'dark' ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.08)'};
+          line-height: 0;
+        }
+        .feature-video {
+          width: 100%;
+          height: auto;
+          display: block;
+          object-fit: cover;
+        }
+        .content-container {
+          padding: 8px 0;
+        }
+        @media (min-width: 768px) {
+          .features-group {
+            grid-template-columns: 1fr 1fr;
+            gap: 48px;
+            margin: 96px auto;
           }
-          @media (min-width: 650px) {
-            .features-group {
-              display: grid;
-              grid-template-columns: 1fr 1fr;
-              gap: 2rem;
-              align-items: center;
-            }
-            .inverse {
-              order: 2;
-            }
+          .inverse {
+            order: 2;
           }
-        `}
-      </style>
+        }
+      `}</style>
     </article>
   );
 };

src/components/SupportCard.tsx

@@ -1,4 +1,4 @@
-import { Button, Card, Spacer, useTheme, Tag, Grid } from '@geist-ui/core';
+import { Button, Card, useTheme, Text, Grid } from '@geist-ui/core';
 import { Chiislate } from './translation/Chiislate';
 import { FaDiscord, FaInstagram, FaTwitter, FaReddit } from 'react-icons/fa';
 import { AiFillYoutube, AiFillGithub } from 'react-icons/ai';
@@ -8,49 +8,56 @@ interface SupportCardProps {
   icon: string;
   title: string;
   link: string;
-  mobileLayout: boolean;
+  mobileLayout?: boolean;
 }
 
-const SupportCard = ({ icon, title, link, mobileLayout }: SupportCardProps) => {
+const SupportCard = ({ icon, title, link }: SupportCardProps) => {
+  const theme = useTheme();
+
   const iconSelector = () => {
+    const iconStyle = { margin: '0 auto', color: theme.palette.foreground };
     switch (icon) {
       case 'Twitter':
-        return <FaTwitter display="block" size={150} style={{ margin: 'auto' }} />;
+        return <FaTwitter size={36} style={iconStyle} />;
       case 'GitHub':
-        return <AiFillGithub display="block" size={150} style={{ margin: 'auto' }} />;
+        return <AiFillGithub size={36} style={iconStyle} />;
       case 'YouTube':
-        return <AiFillYoutube display="block" size={150} style={{ margin: 'auto' }} />;
+        return <AiFillYoutube size={36} style={iconStyle} />;
       case 'Discord':
-        return <FaDiscord display="block" size={150} style={{ margin: 'auto' }} />;
+        return <FaDiscord size={36} style={iconStyle} />;
       case 'Reddit':
-        return <FaReddit display="block" size={150} style={{ margin: 'auto' }} />;
+        return <FaReddit size={36} style={iconStyle} />;
       case 'Instagram':
-        return <FaInstagram display="block" size={150} style={{ margin: 'auto' }} />;
+        return <FaInstagram size={36} style={iconStyle} />;
+      default:
+        return null;
     }
   };
-  const theme = useTheme();
+
   return (
-    <Grid xs={mobileLayout ? 15 : 8} style={{ width: '60%' }}>
+    <Grid xs={24} sm={12} md={8}>
       <Card
-        style={{ background: theme.palette.background }}
-        hoverable
-        paddingTop="40px"
-        paddingBottom="9px"
-        width="95%"
+        className="support-card"
+        style={{
+          background: theme.type === 'dark' ? '#19191b' : '#ffffff',
+          border: `1px solid ${theme.type === 'dark' ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.08)'}`,
+          borderRadius: '12px',
+          padding: '24px',
+          textAlign: 'center',
+          width: '100%'
+        }}
       >
-        {iconSelector()}
-        <Spacer />
-        <Tag>
+        <div style={{ height: '48px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+          {iconSelector()}
+        </div>
+        <Text h4 style={{ margin: '12px 0 16px 0', fontWeight: 500 }}>
           <Chiislate>{title}</Chiislate>
-        </Tag>
-        <Spacer />
-        <Link href={link} target="_blank" rel="noreferrer">
-          <Button type="success" width={0.7} shadow margin="9px">
-            <Chiislate>Visit</Chiislate>
-            {mobileLayout}
+        </Text>
+        <Link href={link} target="_blank" rel="noreferrer" passHref legacyBehavior>
+          <Button type="default" scale={0.9} width="100%">
+            <Chiislate>Open</Chiislate>
           </Button>
         </Link>
-        <Spacer h={3} />
       </Card>
     </Grid>
   );

src/components/WidthRequirement.tsx

@@ -1,109 +1,43 @@
-/**
- * @file An easy to use react component for automatically show error on different screen width
- * @author AvdanOS
- * @license GPL-3.0
- */
-
 import { Modal, useModal, Button } from '@geist-ui/core';
-import { useState, useEffect } from 'react';
+import { useEffect } from 'react';
 import dynamicWidth from '@/lib/dynamic-width';
 import { Chiislate } from './translation/Chiislate';
 
-declare global {
-  interface Window {
-    opera: any;
-  }
-}
-
 const WidthRequirement = ({ width, redirect }: { width: number; redirect?: string | null }) => {
   const { setVisible, bindings } = useModal();
-  const [subtitle, setSubtitle] = useState('Rotate Your Device');
-  const [content, setContent] = useState(
-    'Your screen is too small to display this page. Please rotate to landscape view or use desktop.'
-  );
-  let closeHandler = (): void => {};
-  useEffect(() => {
-    closeHandler = () => {
-      if (redirect) return window.location.replace(redirect);
-      window.location.replace('/');
-    };
-  });
-  const mobileAndTabletCheck = function () {
-    let check = false;
-    (function (a) {
-      if (
-        /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(
-          a
-        ) ||
-        /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(
-          a.substr(0, 4)
-        )
-      )
-        check = true;
-    })(navigator.userAgent || navigator.vendor || window.opera); //test github updating check code
-    return check;
-  };
+
   dynamicWidth((updatedWidth) => {
     if (updatedWidth > width) {
       setVisible(false);
-      return;
-    }
-    if (screen.availWidth > width) {
-      // make window bigger
-      setSubtitle('Increase your window width');
-      setContent(
-        'Your window is too small to display the content of this page, and we detected that you got more screen estate. Please increase your window width or maximise your browser window.'
-      );
+    } else {
       setVisible(true);
-      return;
     }
-    if (screen.availHeight > width && mobileAndTabletCheck()) {
-      // Rotate device
-      setSubtitle('Rotate your device');
-      setContent(
-        'Your screen width is too small to display the content of this page, and we detected that you are in portrait view. Rotate and use landscape view.'
-      );
-      setVisible(true);
-      return;
-    }
-    // Unavailable error
-    if (mobileAndTabletCheck()) {
-      setSubtitle('This page is incompatible');
-      setContent(
-        "Your screen width is too small to display the content of this page. You might need to increase your system's resolution or use a bigger screen to view this page."
-      );
-      return;
-    }
-    setSubtitle('This page is incompatible');
-    setContent(
-      "Your screen width is too small to display the content of this page. Please increase your system's resolution."
-    );
-    setVisible(true);
-    return;
   });
+
+  const closeHandler = () => {
+    if (redirect) {
+      window.location.replace(redirect);
+    } else {
+      setVisible(false);
+    }
+  };
+
   return (
-    <Modal
-      {...bindings}
-      onClose={() => {
-        closeHandler();
-      }}
-    >
-      <Modal.Title>
-        <Chiislate>Width Incompatibility</Chiislate>
-      </Modal.Title>
-      <Modal.Subtitle>
-        <Chiislate>{subtitle}</Chiislate>
-      </Modal.Subtitle>
+    <Modal {...bindings}>
+      <Modal.Title><Chiislate>Display recommendation</Chiislate></Modal.Title>
+      <Modal.Subtitle><Chiislate>Expanded viewport suggested</Chiislate></Modal.Subtitle>
       <Modal.Content>
-        <p>
-          <Chiislate>{content}</Chiislate>
+        <p style={{ fontSize: '0.95rem', lineHeight: 1.6 }}>
+          <Chiislate>
+            The AvdanOS interface prototype is designed for desktop proportions. Rotate your device to landscape or expand your browser window for the intended experience.
+          </Chiislate>
         </p>
       </Modal.Content>
-      <Modal.Action onClick={() => closeHandler()}>
-        <Chiislate>Close</Chiislate>
+      <Modal.Action onClick={closeHandler}>
+        <Chiislate>Continue anyway</Chiislate>
       </Modal.Action>
     </Modal>
   );
 };
 
-export default WidthRequirement;
+export default WidthRequirement;