fixed dark mode images on colors page

Signed-off-by: lakshya <[email protected]>

src/pages/projects/sistent/identity/spacing.js

@@ -1,5 +1,5 @@
 import React from "react";
-import SistentIdentitySpacing from "../../../../sections/Projects/Sistent/identity/spacing";
+import SistentIdentitySpacing from "../../../../sections/Projects/Sistent/identity/spacing/index";
 
 const IdentitySpacingPage = () => {
   return <SistentIdentitySpacing />;

src/sections/Projects/Sistent/about.js

@@ -20,6 +20,7 @@ const SistentAbout = () => {
             <a id="About Sistent">
               <h2>About Sistent</h2>
             </a>
+            <p>Sorry, this page is still under work</p>
           </div>
           <SistentPagination />
         </Container>

src/sections/Projects/Sistent/identity/color/code.js

@@ -5,9 +5,17 @@ import BgColors from "../../../../../assets/images/app/projects/sistent/bg-color
 import FunctionColors from "../../../../../assets/images/app/projects/sistent/function-colors-table.svg";
 import TextColors from "../../../../../assets/images/app/projects/sistent/text-colors-table.svg";
 import BorderColors from "../../../../../assets/images/app/projects/sistent/border-colors-table.svg";
+import BrandColorsDark from "../../../../../assets/images/app/projects/sistent/brand-colors-table-dark.svg";
+import GreyscaleColorsDark from "../../../../../assets/images/app/projects/sistent/greyscale-colors-table-dark.svg";
+import BgColorsDark from "../../../../../assets/images/app/projects/sistent/bg-colors-table-dark.svg";
+import FunctionColorsDark from "../../../../../assets/images/app/projects/sistent/function-colors-table-dark.svg";
+import TextColorsDark from "../../../../../assets/images/app/projects/sistent/text-colors-table-dark.svg";
+import BorderColorsDark from "../../../../../assets/images/app/projects/sistent/border-colors-table-dark.svg";
 import { Col, Row } from "../../../../../reusecore/Layout";
+import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
 
 const ColorCode = () => {
+  const { isDark } = useStyledDarkMode();
   return (
     <div className="main-content">
       <p>
@@ -30,19 +38,31 @@ const ColorCode = () => {
       <h3>Brand Colors</h3>
       <Row className="image-container" Hcenter>
         <Col md={8} lg={8} sm={12}>
-          <img width="100%" src={BrandColors} alt="Brand colors" />
+          <img
+            width="100%"
+            src={isDark ? BrandColorsDark : BrandColors}
+            alt="Brand colors"
+          />
         </Col>
       </Row>
       <h3>Greyscale Colors</h3>
       <Row className="image-container" Hcenter>
         <Col md={8} lg={8} sm={12}>
-          <img width="100%" src={GreyscaleColors} alt="Greyscale colors" />
+          <img
+            width="100%"
+            src={isDark ? GreyscaleColorsDark : GreyscaleColors}
+            alt="Greyscale colors"
+          />
         </Col>
       </Row>
       <h3>Function Colors</h3>
       <Row className="image-container" Hcenter>
         <Col md={8} lg={8} sm={12}>
-          <img width="100%" src={FunctionColors} alt="Function colors" />
+          <img
+            width="100%"
+            src={isDark ? FunctionColorsDark : FunctionColors}
+            alt="Function colors"
+          />
         </Col>
       </Row>
       <a id="Semantic Category">
@@ -56,19 +76,31 @@ const ColorCode = () => {
       <h3>Background Colors</h3>
       <Row className="image-container" Hcenter>
         <Col md={8} lg={8} sm={12}>
-          <img width="100%" src={BgColors} alt="Background colors" />
+          <img
+            width="100%"
+            src={isDark ? BgColorsDark : BgColors}
+            alt="Background colors"
+          />
         </Col>
       </Row>
       <h3>Text Colors</h3>
       <Row className="image-container" Hcenter>
         <Col md={8} lg={8} sm={12}>
-          <img width="100%" src={TextColors} alt="Text colors" />
+          <img
+            width="100%"
+            src={isDark ? TextColorsDark : TextColors}
+            alt="Text colors"
+          />
         </Col>
       </Row>
       <h3>Border Colors</h3>
       <Row className="image-container" Hcenter>
         <Col md={8} lg={8} sm={12}>
-          <img width="100%" src={BorderColors} alt="Border colors" />
+          <img
+            width="100%"
+            src={isDark ? BorderColorsDark : BorderColors}
+            alt="Border colors"
+          />
         </Col>
       </Row>
     </div>

src/sections/Projects/Sistent/identity/color/guidance.js

@@ -1,10 +1,14 @@
 import React from "react";
 import { Col, Row } from "../../../../../reusecore/Layout";
 import TonalPalettes from "../../../../../assets/images/app/projects/sistent/tonal-palettes-full.svg";
+import TonalPalettesDark from "../../../../../assets/images/app/projects/sistent/tonal-palettes-full-dark.svg";
 import ContextVisuals5 from "../../../../../assets/images/app/projects/sistent/context-visuals-5.svg";
 import ContextVisuals6 from "../../../../../assets/images/app/projects/sistent/context-visuals-6.svg";
+import ContextVisuals6Dark from "../../../../../assets/images/app/projects/sistent/context-visuals-6-dark.svg";
+import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
 
 const ColorGuidance = () => {
+  const { isDark } = useStyledDarkMode();
   return (
     <div className="main-content">
       <p>
@@ -39,7 +43,10 @@ const ColorGuidance = () => {
       </p>
       <Row className="image-container" Hcenter>
         <Col md={8} lg={8} sm={12}>
-          <img src={TonalPalettes} alt="Content Visuals" />
+          <img
+            src={isDark ? TonalPalettesDark : TonalPalettes}
+            alt="Tonal Palettes"
+          />
         </Col>
       </Row>
       <a id="Basic Colors">
@@ -104,7 +111,7 @@ const ColorGuidance = () => {
       </p>
       <Row className="image-container" Hcenter>
         <Col md={8} lg={8} sm={12}>
-          <img src={ContextVisuals5} alt="Content Visuals" />
+          <img src={ContextVisuals5} alt="Context Visuals" />
         </Col>
       </Row>
       <h3>The Role of Color Tokens</h3>
@@ -147,7 +154,11 @@ const ColorGuidance = () => {
       </p>
       <Row className="image-container" Hcenter>
         <Col md={6} lg={6} sm={12}>
-          <img width="100%" src={ContextVisuals6} alt="Content Visuals" />
+          <img
+            width="100%"
+            src={isDark ? ContextVisuals6Dark : ContextVisuals6}
+            alt="Context Visuals"
+          />
         </Col>
       </Row>
       <p>

src/sections/Projects/Sistent/identity/color/overview.js

@@ -1,13 +1,15 @@
 import React from "react";
 import { Col, Row } from "../../../../../reusecore/Layout";
 import TonalPallete from "../../../../../assets/images/app/projects/sistent/tonal-palettes.svg";
+import TonalPalleteDark from "../../../../../assets/images/app/projects/sistent/tonal-palettes-dark.svg";
 import ContextVisuals1 from "../../../../../assets/images/app/projects/sistent/context-visuals-1.svg";
 import ContextVisuals2 from "../../../../../assets/images/app/projects/sistent/context-visuals-2.svg";
 import ContextVisuals3 from "../../../../../assets/images/app/projects/sistent/context-visuals-3.svg";
 import ContextVisuals4 from "../../../../../assets/images/app/projects/sistent/context-visuals-4.svg";
-import TocPagination from "../../../../../components/handbook-navigation/TocPagination";
+import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
 
 const ColorOverview = () => {
+  const { isDark } = useStyledDarkMode();
   return (
     <div className="main-content">
       <p>
@@ -87,7 +89,10 @@ const ColorOverview = () => {
       </p>
       <Row Hcenter className="image-container">
         <Col md={8} lg={8} sm={12}>
-          <img src={TonalPallete} alt="Tonal Palette" />
+          <img
+            src={isDark ? TonalPalleteDark : TonalPallete}
+            alt="Tonal Palette"
+          />
         </Col>
       </Row>
       <a id="Layer Hirarchy">

src/sections/Projects/Sistent/identity/spacing/code.js

@@ -0,0 +1,5 @@
+import React from "react";
+
+export const SpacingCode = () => {
+  return <div>SpacingCode</div>;
+};

src/sections/Projects/Sistent/identity/spacing/guidance.js

@@ -0,0 +1,5 @@
+import React from "react";
+
+export const SpacingGuidance = () => {
+  return <div>SpacingGuidance</div>;
+};

src/sections/Projects/Sistent/identity/spacing/index.js

@@ -0,0 +1,62 @@
+import React, { useState } from "react";
+import { Container } from "../../../../../reusecore/Layout";
+import SistentWrapper from "../../sistent.style";
+import TOC from "../../../../../components/SistentNavigation";
+import IntraPage from "../../../../../components/handbook-navigation/intra-page";
+import Button from "../../../../../reusecore/Button";
+import SistentPagination from "../../../../../components/SistentNavigation/pagination";
+import { SpacingOverview } from "./overview";
+import { SpacingGuidance } from "./guidance";
+import { SpacingCode } from "./code";
+
+const contents = [{ id: 0, link: "#About Sistent", text: "About Sistent" }];
+
+const SistentIdentitySpacing = () => {
+  const [activeTab, setActiveTab] = useState("overview");
+  return (
+    <SistentWrapper>
+      <div className="page-header-section">
+        <h1>Spacing</h1>
+      </div>
+      <TOC />
+      <div className="page-section">
+        <Container>
+          <div className="content">
+            <a id="Identity">
+              <h2>Spacing</h2>
+            </a>
+            <p>
+              Space is the unseen component in designed solutions that enables
+              clear, concise, and consistent arrangement of interface elements
+              across a screen.
+            </p>
+            <div className="filterBtns">
+              <Button
+                className={activeTab == "overview" ? "active" : ""}
+                onClick={() => setActiveTab("overview")}
+                title="Overview"
+              />
+              <Button
+                className={activeTab == "guidance" ? "active" : ""}
+                onClick={() => setActiveTab("guidance")}
+                title="Guidance"
+              />
+              <Button
+                className={activeTab == "code" ? "active" : ""}
+                onClick={() => setActiveTab("code")}
+                title="Code"
+              />
+            </div>
+            {activeTab === "overview" && <SpacingOverview />}
+            {activeTab === "guidance" && <SpacingGuidance />}
+            {activeTab === "code" && <SpacingCode />}
+            <SistentPagination />
+          </div>
+        </Container>
+        <IntraPage contents={contents} />
+      </div>
+    </SistentWrapper>
+  );
+};
+
+export default SistentIdentitySpacing;

src/sections/Projects/Sistent/identity/spacing/overview.js

@@ -0,0 +1,70 @@
+import React from "react";
+
+export const SpacingOverview = () => {
+  return (
+    <div className="main-content">
+      <p>
+        Spacing is a foundational consideration in any design endeavor. From
+        intra component spacing to space between elements in a given layout,
+        intentional application of spacing across a digital experience elevates
+        its usability, improves its (or the) experience, and eventually
+        generates much needed website traffic which is a primary goal for most
+        digital solutions.
+      </p>
+      <a id="The Basics">
+        <h2>The Basics</h2>
+      </a>
+      <p>
+        A few concepts can be handy to keep in mind as we consider spacing and
+        its application throughout designs to ensure clarity and proper
+        understanding.
+      </p>
+      <h3>Inset</h3>
+      <p>
+        Inset describes the value of padding for any container in the interface.
+        The description of a container can range from full page layouts, to page
+        sections, all the way down to card containers and even icon frames.
+        Inset accounts for the values of both horizontal and vertical padding.
+        The horizontal and vertical paddings don’t need to have the same value,
+        however, it is recommended that the values for the horizontal padding
+        are equivalent. This principle applies to the values for the vertical
+        paddings as well.
+      </p>
+      <h3>Stack</h3>
+      <p>
+        Stack in spacing is used to describe the space between vertically
+        arranged content in a digital interface. Since most digital content is
+        read from top to bottom, It is only right that they are arranged in such
+        a way that accurately conveys hierarchy, relationship and spatial
+        harmony.
+      </p>
+      <h3>Inline</h3>
+      <p>
+        This is the horizontal space consideration given to elements that are
+        being arranged in an interface. It can be the space between text input,
+        horizontally stacked elements like buttons and so on.
+      </p>
+      <a id="Scaling">
+        <h2>Scaling</h2>
+      </a>
+      <p>
+        To properly implement spacing, a set of values have to be generated
+        using a scale just like was done in the case of typography. This avails
+        us with a fixed range of values that provide the much needed flexibility
+        required by interfaces to be consistent. This range could be derived
+        from a base spacing value which follows a principle like a linear scale
+        from the base value, multiples of the base value, the golden ratio, or a
+        modular scale.
+      </p>
+      <p>
+        Most digital screen resolutions are divisible by 16 which is a multiple
+        of eight and so, this makes it a good reason to utilize eight as our
+        base spacing value. Our scale, therefore, has been derived from
+        multiples of eight with a half and quarter step of eight included in the
+        scale to account for much smaller space considerations, for example,
+        icon padding. The half and quarter steps have values of two and four
+        respectively.
+      </p>
+    </div>
+  );
+};

src/sections/Projects/Sistent/index.js

@@ -14,17 +14,17 @@ const SistentHome = () => {
       <div className="community-home-container">
         <HandbookCard
           title="About"
-          description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris."
+          description="Ensuring clarity and consistency across projects. Empowering developers with modular components, it defines a unified visual language, fostering a seamless and cohesive user experience."
           to="/projects/sistent/about"
         />
         <HandbookCard
           title="Identity"
-          description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris."
-          to="/projects/sistent/identity"
+          description="Harmonizing Layer5's visual language. Precision in colors, balanced spacing, and refined typography create a unified, appealing design, enhancing user experience across projects."
+          to="/projects/sistent/identity/color"
         />
         <HandbookCard
           title="Components"
-          description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris."
+          description="Streamlining development with reusable elements for consistent design. Empower projects with modular components, ensuring a unified and efficient user interface across Layer5 initiatives"
           to="/projects/sistent/components"
         />
       </div>