fixed flow hero appearanec

src/components/flow/FlowHero/index.tsx

@@ -16,10 +16,10 @@ const FlowHeroUnconnected: FC<IProps> = ({ heroes, history }) => {
   const [limit, setLimit] = useState(Math.min(heroes.length, 6));
   const [current, setCurrent] = useState(0);
   const [loaded, setLoaded] = useState([]);
+  const [is_mobile, setIsMobile] = useState(false);
+
   const timer = useRef(null);
-
   const onLoad = useCallback(id => () => setLoaded([...loaded, id]), [setLoaded, loaded]);
-
   const onNext = useCallback(() => {
     clearTimeout(timer.current);
 
@@ -80,6 +80,8 @@ const FlowHeroUnconnected: FC<IProps> = ({ heroes, history }) => {
     return item.title;
   }, [loaded, current, heroes]);
 
+  const preset = useMemo(() => (window.innerWidth <= 768 ? PRESETS.cover : PRESETS.small_hero), []);
+
   return (
     <div className={styles.wrap} onMouseOver={stopSliding} onFocus={stopSliding}>
       {loaded && loaded.length > 0 && (
@@ -104,13 +106,13 @@ const FlowHeroUnconnected: FC<IProps> = ({ heroes, history }) => {
             [styles.is_active]: current === hero.id,
           })}
           style={{
-            backgroundImage: `url("${getURL({ url: hero.thumbnail }, PRESETS.small_hero)}")`,
+            backgroundImage: `url("${getURL({ url: hero.thumbnail }, preset)}")`,
           }}
           key={hero.id}
           onClick={onClick}
         >
           <img
-            src={getURL({ url: hero.thumbnail }, PRESETS.small_hero)}
+            src={getURL({ url: hero.thumbnail }, preset)}
             alt={hero.thumbnail}
             onLoad={onLoad(hero.id)}
           />

src/components/flow/FlowHero/styles.scss

@@ -1,12 +1,3 @@
-// @keyframes rise {
-//   0% {
-//     transform: translate(0, 0);
-//   }
-//   100% {
-//     transform: translate(0, -10%);
-//   }
-// }
-
 .wrap {
   width: 100%;
   height: 100%;
@@ -16,20 +7,20 @@
   overflow: hidden;
 
   &::after {
-    content: " ";
+    content: ' ';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
-    background: url("~/sprites/stripes.svg") rgba(0, 0, 0, 0.3);
+    background: url('~/sprites/stripes.svg') rgba(0, 0, 0, 0.3);
     z-index: 4;
     pointer-events: none;
     touch-action: none;
   }
 
   &::before {
-    content: " ";
+    content: ' ';
     position: absolute;
     top: 0;
     left: 0;
@@ -94,6 +85,7 @@
   box-sizing: border-box;
   z-index: 5;
   flex-direction: row;
+  align-items: flex-end;
 }
 
 .title_wrap {
@@ -105,19 +97,28 @@
   font: $font_hero_title;
   text-transform: uppercase;
   text-overflow: ellipsis;
+  line-height: 1.2em;
+
+  @include tablet {
+    white-space: initial;
+    word-wrap: break-word;
+    font: $font_32_bold;
+    max-height: 3.6em;
+  }
 }
 
-.title {
-  flex: 0;
-  height: 48px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0 $gap 0 0;
-  border-radius: $radius;
-  font: $font_hero_title;
-  text-transform: uppercase;
-}
+// .title {
+//   flex: 0;
+//   height: 48px;
+//   display: flex;
+//   align-items: center;
+//   justify-content: center;
+//   padding: 0 $gap 0 0;
+//   background: red;
+//   border-radius: $radius;
+//   font: $font_hero_title;
+//   text-transform: uppercase;
+// }
 
 .buttons {
   display: flex;

src/styles/variables.scss

@@ -38,6 +38,7 @@ $font: Montserrat, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helve
 
 $font_48_semibold: $semibold 48px $font;
 $font_48_bold: $bold 48px $font;
+$font_32_bold: $bold 32px $font;
 $font_24_bold: $bold 24px $font;
 $font_24_semibold: $bold 24px $font;
 $font_24_medium: $medium 24px $font;