From 7c2620264fc702e3152739190e6aabdfcd4cfb1d Mon Sep 17 00:00:00 2001
From: MrTRyy <tobiastry@aol.de>
Date: Mon, 11 Dec 2023 16:13:48 +0100
Subject: [PATCH] test: breakpoints

---
 .../ExperimentalRoute/ExperimentalRoute.tsx   |  2 ++
 src/Routes/HeaderRoute/HeaderRoute.tsx        | 24 ++++++++++++++-----
 src/Routes/HeaderRoute/breakPointStyle.ts     | 18 ++++++++++++++
 .../FancyGrid/FancyGridItem/FancyGridItem.tsx |  2 +-
 src/design/theme/brakePoints.ts               |  8 +++----
 5 files changed, 43 insertions(+), 11 deletions(-)
 create mode 100644 src/Routes/HeaderRoute/breakPointStyle.ts

diff --git a/src/Routes/ExperimentalRoute/ExperimentalRoute.tsx b/src/Routes/ExperimentalRoute/ExperimentalRoute.tsx
index 1e23a73a5..e55b0e838 100644
--- a/src/Routes/ExperimentalRoute/ExperimentalRoute.tsx
+++ b/src/Routes/ExperimentalRoute/ExperimentalRoute.tsx
@@ -18,6 +18,7 @@ import { SingleToastMessage } from '@/components/molecules/SingleToastMessage';
 import { FancyCard } from '@/components/atoms/FancyCard';
 import { FancyChip } from '@/components/organisms/FancyChip';
 import { FancyNumberInput } from '@/components/organisms/FancyNumberInput';
+import Pill from '@/components/atoms/Pill/Pill';
 
 const Icon = (
   <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
@@ -62,6 +63,7 @@ export default function ExperimentalRoute() {
 
   return (
     <DesignWrapper>
+      <Pill>Mooin</Pill>
       <DesignArea title="Test">
         <FancyNumberInput />
 
diff --git a/src/Routes/HeaderRoute/HeaderRoute.tsx b/src/Routes/HeaderRoute/HeaderRoute.tsx
index c2bf41876..2aa5309ed 100644
--- a/src/Routes/HeaderRoute/HeaderRoute.tsx
+++ b/src/Routes/HeaderRoute/HeaderRoute.tsx
@@ -18,6 +18,7 @@ import { FancyGrid } from '@/components/templates/FancyGrid';
 import { FancyMenu } from '@/components/templates/FancyMenueComponent/FancyMenu';
 import { FancyPopover } from '@/components/shared/FancyPopover';
 import { FancyFlexBox } from '@/components/templates/FancyFlexBox';
+import { breakPointStyle } from '@/Routes/HeaderRoute/breakPointStyle';
 
 const Logo = () => (
   <svg
@@ -73,21 +74,32 @@ const HeaderContent = () => {
 export default function HeaderRoute() {
   const [isOpen, setIsOpen] = useState(false);
 
+  console.log(breakPointStyle);
+
   return (
     <section>
       <FancyFlexBox className="hii"></FancyFlexBox>
       <FancyHeader externalStyle={{ height: '44px', padding: '0 12px' }}>
         <FancyGrid grid={8} gap="12px">
-          <FancyGrid.Item gridSpace={2}>
-            <FancyGrid.Item.FlexBox flexAlign="center" flexJustify="flex-start" className={'mooiiin'}>
-              <FancyHeader.Logo>
-                <FancyHeader.Logo.Icon>
+          <FancyGrid.Item gridSpace={1}>
+            <FancyGrid.Item.FlexBox
+              flexAlign="center"
+              flexJustify="flex-start"
+              className={'mooiiin'}
+              externalStyle={breakPointStyle}
+            >
+              <FancyHeader.Logo className="logo">
+                <FancyHeader.Logo.Icon className="logo_icon">
                   <Logo></Logo>
                 </FancyHeader.Logo.Icon>
-                <FancyHeader.Logo.Title type="h3">Mooiin</FancyHeader.Logo.Title>
+
+                <FancyHeader.Logo.Title type="h3" className="logo_text">
+                  Mooiin
+                </FancyHeader.Logo.Title>
               </FancyHeader.Logo>
             </FancyGrid.Item.FlexBox>
           </FancyGrid.Item>
+
           <FancyGrid.Item gridSpace={4}>
             <FancyGrid.Item.FlexBox flexAlign="center" flexJustify="center">
               <FancyHeader.Nav>
@@ -113,8 +125,8 @@ export default function HeaderRoute() {
                 refComponent={
                   <FancyMiniProfile
                     size={'sm'}
+                    headingText="mooin"
                     alignText="left"
-                    headingText="@TobiTRy"
                     src="https://www.az-online.de/bilder/2019/08/23/12938342/2113799823-tobias-rester-2tyMMSkM2R73.jpg"
                   />
                 }
diff --git a/src/Routes/HeaderRoute/breakPointStyle.ts b/src/Routes/HeaderRoute/breakPointStyle.ts
new file mode 100644
index 000000000..d178fbb36
--- /dev/null
+++ b/src/Routes/HeaderRoute/breakPointStyle.ts
@@ -0,0 +1,18 @@
+import { TTheme } from '@/interface/TTheme';
+import { css } from 'styled-components';
+
+export const breakPointStyle = css<{ theme: TTheme }>`
+  .logo {
+    &_text {
+      display: none;
+    }
+  }
+
+  @media ${({ theme }) => theme.breakpoints.md} {
+    .logo {
+      &_text {
+        display: flex;
+      }
+    }
+  }
+`;
diff --git a/src/components/templates/FancyGrid/FancyGridItem/FancyGridItem.tsx b/src/components/templates/FancyGrid/FancyGridItem/FancyGridItem.tsx
index e156c5fe8..3e9d12e1d 100644
--- a/src/components/templates/FancyGrid/FancyGridItem/FancyGridItem.tsx
+++ b/src/components/templates/FancyGrid/FancyGridItem/FancyGridItem.tsx
@@ -42,7 +42,7 @@ const GridItem = styled.div<TGirdItemProps & { as: React.ElementType }>`
     $breakpoints &&
     $breakpoints.map(
       (breakpoint) => css`
-        @media (min-width: ${breakpoint.breakpoint}) {
+        @media (${breakpoint.breakpoint}) {
           grid-column: span ${breakpoint.gridSize};
         }
       `
diff --git a/src/design/theme/brakePoints.ts b/src/design/theme/brakePoints.ts
index 65be88c55..e4ab5ea16 100644
--- a/src/design/theme/brakePoints.ts
+++ b/src/design/theme/brakePoints.ts
@@ -1,6 +1,6 @@
 export const breakpoints = {
-  sm: 'screen and (max-width: 576px)',
-  md: 'screen and (max-width: 768px)',
-  lg: 'screen and (max-width: 992px)',
-  xl: 'screen and (max-width: 1200px)',
+  sm: 'screen and (min-width: 576px)',
+  md: 'screen and (min-width: 768px)',
+  lg: 'screen and (min-width: 992px)',
+  xl: 'screen and (min-width: 1200px)',
 };