Download page ARM, style

biolab · Oct 24, 2023 · e7baddd · e7baddd · vercel · Oct 24, 2023
1 parent 2ec81c7
commit e7baddd
Show file tree

Hide file tree

Showing 13 changed files with 144 additions and 82 deletions.
diff --git a/components/Download/Header.tsx b/components/Download/Header.tsx
@@ -6,12 +6,7 @@ import Adapt from "@components/UiKit/Adapt";
 import HeroImage from "@public/download/download-hero-image.webp";
 import Image from "@components/Image/Image";
 import device from "@styles/utils/breakpoints";
-
-const downloadLinks = {
-  macos: `https://download.biolab.si/download/files/Orange3-${config.version}-Python3.9.12.dmg`,
-  macosArm: `https://download.biolab.si/download/files/Orange3-${config.version}-Python3.9.12-arm64.dmg`,
-  win: `https://download.biolab.si/download/files/Orange3-${config.version}-Miniconda-x86_64.exe`,
-};
+import { downloadLinks } from "pages/download";
 
 function getOS() {
   let userAgent = window.navigator.userAgent.toLowerCase(),
@@ -34,7 +29,7 @@ function DownloadButton({ os }: { os: string | null }) {
       return "";
     }
 
-    return os === "Mac OS" ? downloadLinks.macos : downloadLinks.win;
+    return os === "Mac OS" ? "#mac" : downloadLinks.win;
   }, [os]);
 
   if (!os) {
@@ -64,7 +59,7 @@ export default function DownloadHeader() {
           alt="Download orange"
         />
 
-        <h1>{os ? "Suggested download" : "Download"}</h1>
+        <h1>{os ? "Suggested download" : "Download Orange"}</h1>
         <DownloadButton os={os} />
       </Adapt>
     </HeaderWrapper>
@@ -76,6 +71,7 @@ const HeaderWrapper = styled.div`
   padding-top: 66px;
   padding-bottom: 66px;
   min-height: 262px;
+  position: relative;
 
   h1 {
     position: relative;
@@ -87,9 +83,10 @@ const HeaderWrapper = styled.div`
   }
 
   img {
-    transform: translateY(34px);
+    transform: translateY(21px);
     position: absolute;
     right: 20%;
+    bottom: 0px;
     z-index: 1;
 
     @media ${device.M} {

diff --git a/components/Footer/Footer.tsx b/components/Footer/Footer.tsx
@@ -6,7 +6,7 @@ import Link from "next/link";
 import styled from "styled-components";
 
 const StyledFooter = styled.footer`
-  background: ${({ theme }) => theme.blackLight};
+  background: ${({ theme }) => theme.blackLight1};
   padding: 38px 0 25px;
   color: #fff;
 `;

diff --git a/components/Home/HomeBlogs.tsx b/components/Home/HomeBlogs.tsx
@@ -49,7 +49,7 @@ const ExposedHomeBlog = styled.div`
     font-size: 44px;
     line-height: 1.09;
     font-weight: 700;
-    color: ${({ theme }) => theme.blackLight};
+    color: ${({ theme }) => theme.blackLight1};
     margin-bottom: 10px;
 
     @media ${device.L} {
@@ -121,7 +121,7 @@ const ListItem = styled.div`
     font-size: 24px;
     line-height: 1.16;
     font-weight: 600;
-    color: ${({ theme }) => theme.blackLight};
+    color: ${({ theme }) => theme.blackLight1};
     margin-bottom: 6px;
 
     @media ${device.L} {
@@ -183,7 +183,7 @@ const ListImageWrapper = styled.figure`
 const ListBodyText = styled.p`
   font-size: 18px;
   line-height: 1.44;
-  color: ${({ theme }) => theme.blackLight};
+  color: ${({ theme }) => theme.blackLight1};
 
   @media ${device.L} {
     font-size: 16px;
@@ -197,7 +197,7 @@ const ListBodyText = styled.p`
 const Date = styled.p<{ $small?: boolean }>`
   font-size: 16px;
   line-height: 1.2;
-  color: ${({ theme }) => theme.blackLight};
+  color: ${({ theme }) => theme.blackLight1};
   margin-bottom: 10px;
 
   ${({ $small }) => $small && `font-size: 14px; margin-bottom: 5px;`};

diff --git a/components/Home/UsersSection.tsx b/components/Home/UsersSection.tsx
@@ -149,7 +149,7 @@ const Dots = styled.div`
 
     &:hover,
     &.active {
-      background-color: ${({ theme }) => theme.blackLight};
+      background-color: ${({ theme }) => theme.blackLight1};
     }
   }
 `;
@@ -189,49 +189,64 @@ export default function UsersSection({
 
           <SliderWrapper>
             <div className="keen-slider" ref={sliderRef}>
-              {testimonials.map(({ title, position, institution, image, text }) => (
-                <Slide key={title} className="keen-slider__slide">
-                  <p>{text}</p>
+              {testimonials.map(
+                ({ title, position, institution, image, text }) => (
+                  <Slide key={title} className="keen-slider__slide">
+                    <p>{text}</p>
 
-                  <User>
-                    <Image {...image} alt="" />
+                    <User>
+                      <Image {...image} alt="" />
 
-                    <div>
-                      <p>
-                        <strong>{title}</strong>
-                      </p>
-                      <p>
-                        {position} ({institution})
-                      </p>
-                    </div>
-                  </User>
-                </Slide>
-              ))}
+                      <div>
+                        <p>
+                          <strong>{title}</strong>
+                        </p>
+                        <p>
+                          {position} ({institution})
+                        </p>
+                      </div>
+                    </User>
+                  </Slide>
+                )
+              )}
             </div>
             {loaded && instanceRef.current && (
               <>
                 <Arrow
                   left
-                  onClick={(e: any) => e.stopPropagation() || instanceRef.current?.prev()}
+                  onClick={(e: any) =>
+                    e.stopPropagation() || instanceRef.current?.prev()
+                  }
                   disabled={currentSlide === 0}
                 />
 
                 <Arrow
-                  onClick={(e: any) => e.stopPropagation() || instanceRef.current?.next()}
-                  disabled={currentSlide === instanceRef.current.track.details.slides.length - 1}
+                  onClick={(e: any) =>
+                    e.stopPropagation() || instanceRef.current?.next()
+                  }
+                  disabled={
+                    currentSlide ===
+                    instanceRef.current.track.details.slides.length - 1
+                  }
                 />
               </>
             )}
             {loaded && instanceRef.current && (
               <Dots>
-                {[...Array(instanceRef.current.track.details.slides.length).keys()].map((idx) => {
+                {[
+                  ...Array(
+                    instanceRef.current.track.details.slides.length
+                  ).keys(),
+                ].map((idx) => {
                   return (
                     <button
                       key={idx}
                       onClick={() => {
                         instanceRef.current?.moveToIdx(idx);
                       }}
-                      className={"dot" + (currentSlide === idx ? " active" : "")}
+                      className={
+                        "dot" + (currentSlide === idx ? " active" : "")
+                      }
                     ></button>
                   );
                 })}
@@ -244,12 +259,18 @@ export default function UsersSection({
   );
 }
 
-function Arrow(props: { disabled: boolean; left?: boolean; onClick: (e: any) => void }) {
+function Arrow(props: {
+  disabled: boolean;
+  left?: boolean;
+  onClick: (e: any) => void;
+}) {
   const disabeld = props.disabled ? " arrow--disabled" : "";
   return (
     <svg
       onClick={props.onClick}
-      className={`arrow ${props.left ? "arrow--left" : "arrow--right"} ${disabeld}`}
+      className={`arrow ${
+        props.left ? "arrow--left" : "arrow--right"
+      } ${disabeld}`}
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 19 31"
     >

diff --git a/components/MdContent/MdContent.styled.tsx b/components/MdContent/MdContent.styled.tsx
@@ -7,7 +7,7 @@ export const ContentStyle = styled.div`
     font-size: 44px;
     line-height: 1.13;
     font-weight: 700;
-    color: ${({ theme }) => theme.blackLight};
+    color: ${({ theme }) => theme.blackLight1};
 
     @media ${device.M} {
       font-size: 38px;
@@ -21,7 +21,7 @@ export const ContentStyle = styled.div`
     font-size: 33px;
     line-height: 1.13;
     font-weight: 600;
-    color: ${({ theme }) => theme.blackLight};
+    color: ${({ theme }) => theme.blackLight1};
 
     @media ${device.M} {
       font-size: 30px;
@@ -35,7 +35,7 @@ export const ContentStyle = styled.div`
     font-size: 28px;
     line-height: 1.18;
     font-weight: 600;
-    color: ${({ theme }) => theme.blackLight};
+    color: ${({ theme }) => theme.blackLight1};
 
     @media ${device.M} {
       font-size: 26px;
@@ -50,7 +50,7 @@ export const ContentStyle = styled.div`
     font-size: 22px;
     line-height: 1.18;
     font-weight: 600;
-    color: ${({ theme }) => theme.blackLight};
+    color: ${({ theme }) => theme.blackLight1};
 
     @media ${device.S} {
       font-size: 20px;
@@ -60,7 +60,7 @@ export const ContentStyle = styled.div`
   p {
     font-size: 20px;
     line-height: 1.4;
-    color: ${({ theme }) => theme.blackLight};
+    color: ${({ theme }) => theme.blackLight1};
 
     @media ${device.L} {
       font-size: 20px;
@@ -78,7 +78,7 @@ export const ContentStyle = styled.div`
     li {
       font-size: 20px;
       line-height: 1.4;
-      color: ${({ theme }) => theme.blackLight};
+      color: ${({ theme }) => theme.blackLight1};
 
       @media ${device.L} {
         font-size: 20px;

diff --git a/components/Pagination/Pagination.tsx b/components/Pagination/Pagination.tsx
@@ -15,7 +15,7 @@ const PaginationWrapper = styled.div`
 const PageButton = styled.button<{ $active?: boolean }>`
   font-size: 16px;
   line-height: 1.25;
-  color: ${({ theme }) => theme.blackLight};
+  color: ${({ theme }) => theme.blackLight1};
   padding: 0;
   border: 0;
   width: 30px;

diff --git a/components/UiKit/Adapt.tsx b/components/UiKit/Adapt.tsx
@@ -8,7 +8,6 @@ const Adapt = styled.div<{
   $width714?: boolean;
   $width924?: boolean;
 }>`
-  position: relative;
   max-width: ${({ theme }) => theme.adaptMaxWidth};
   margin-right: auto;
   margin-left: auto;

diff --git a/components/UiKit/Typography.tsx b/components/UiKit/Typography.tsx
@@ -15,7 +15,7 @@ export const Heading1 = styled.h1`
   font-size: 44px;
   line-height: 1.13;
   font-weight: 700;
-  color: ${({ theme }) => theme.blackLight};
+  color: ${({ theme }) => theme.blackLight1};
   margin-bottom: 12px;
 
   ${LinkInsideH};
@@ -26,15 +26,15 @@ export const Heading2 = styled.h2`
   line-height: 1.18;
   font-weight: 600;
   margin-bottom: 16px;
-  color: ${({ theme }) => theme.blackLight};
+  color: ${({ theme }) => theme.blackLight1};
 
   ${LinkInsideH};
 `;
 
 export const BodyText = styled.p`
   font-size: 20px;
   line-height: 1.4;
-  color: ${({ theme }) => theme.blackLight};
+  color: ${({ theme }) => theme.blackLight1};
 
   @media ${device.S} {
     font-size: 18px;

diff --git a/components/UiKit/TypographyHomepage.tsx b/components/UiKit/TypographyHomepage.tsx
@@ -13,7 +13,7 @@ export const Heading1 = styled.h1<{ $colorBlack?: boolean }>`
   @media ${device.S} {
     font-size: 42px;
   }
-  ${({ $colorBlack, theme }) => $colorBlack && `color: ${theme.blackLight}`};
+  ${({ $colorBlack, theme }) => $colorBlack && `color: ${theme.blackLight1}`};
 `;
 
 export const Heading2 = styled.h2`

diff --git a/pages/blog/[slug].tsx b/pages/blog/[slug].tsx
@@ -53,7 +53,7 @@ const Author = styled.div`
 const Text = styled.p<{ $colorPurple?: boolean; $capitalize?: boolean }>`
   font-size: 20px;
   line-height: 1.25;
-  color: ${({ theme }) => theme.blackLight};
+  color: ${({ theme }) => theme.blackLight1};
 
   @media ${device.M} {
     font-size: 18px;