QF-1969 change logo font size in video generator (#2326)

* remotion package update * fix build * change QDC logo font size * increase video title top padding on portrait mode
quran · Feb 23, 2025 · 31e0ab8 · 31e0ab8
1 parent 28abb2a
commit 31e0ab8
Show file tree

Hide file tree

Showing 5 changed files with 1,669 additions and 1,450 deletions.
diff --git a/package.json b/package.json
@@ -66,11 +66,11 @@
     "@radix-ui/react-tooltip": "^1.1.2",
     "@radix-ui/react-visually-hidden": "^1.1.0",
     "@reduxjs/toolkit": "^2.2.7",
-    "@remotion/bundler": "4.0.206",
-    "@remotion/cli": "4.0.206",
-    "@remotion/eslint-plugin": "4.0.206",
-    "@remotion/lambda": "4.0.206",
-    "@remotion/player": "4.0.206",
+    "@remotion/bundler": "4.0.266",
+    "@remotion/cli": "4.0.266",
+    "@remotion/eslint-plugin": "4.0.266",
+    "@remotion/lambda": "4.0.266",
+    "@remotion/player": "4.0.266",
     "@sanity/client": "^5.2.1",
     "@sanity/image-url": "^1.0.2",
     "@sentry/nextjs": "^7.77.0",
@@ -110,7 +110,7 @@
     "redux-persist": "^6.0.0",
     "refresh-fetch": "^0.8.0",
     "remark-directive": "^3.0.0",
-    "remotion": "4.0.206",
+    "remotion": "^4.0.266",
     "swr": "1.2.1",
     "xstate": "^4.33.6"
   },

diff --git a/src/components/MediaMaker/Content/MediaMakerContent.module.scss b/src/components/MediaMaker/Content/MediaMakerContent.module.scss
@@ -58,31 +58,31 @@ $white: #ffffff;
 .watermark {
   text-align: center;
   color: $white;
-  font-size: 19px;
+  font-size: 28px;
   font-family: "Figtree" !important;
   font-weight: var(--font-weight-bold);
 }
 
 .watermarkPortrait {
-  font-size: 19px;
+  font-size: 28px;
 }
 
 .watermarkLandscape {
-  font-size: 17px;
+  font-size: 25px;
 }
 
 .logo {
   font-weight: 700;
-  font-size: 29px;
+  font-size: 42px;
   font-family: "PlayfairDisplay" !important;
 }
 
 .logoPortrait {
-  font-size: 29px;
+  font-size: 42px;
 }
 
 .logoLandscape {
-  font-size: 25px;
+  font-size: 36px;
 }
 
 .space {

diff --git a/src/components/MediaMaker/Content/index.tsx b/src/components/MediaMaker/Content/index.tsx
@@ -121,7 +121,7 @@ const MediaMakerContent: React.FC<Props> = ({
               <AbsoluteFill
                 style={{
                   height: '250px',
-                  paddingTop: isPortrait ? 90 : 40,
+                  paddingTop: isPortrait ? 180 : 40,
                   backgroundImage: 'linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0))',
                 }}
               >

diff --git a/src/components/dls/Button/Button.module.scss b/src/components/dls/Button/Button.module.scss
@@ -1,4 +1,11 @@
-@use "src/styles/utility";
+// we are using this mixin ase using the one from utility.scss will break the remotion build
+@mixin lighten-background-color {
+  background-image: linear-gradient(
+    to right,
+    var(--color-background-lighten),
+    var(--color-background-lighten)
+  );
+}
 
 .base {
   border: none;
@@ -130,7 +137,7 @@
   color: var(--themed-bg);
   &:hover {
     background-color: var(--themed-bg);
-    @include utility.lighten-background-color;
+    @include lighten-background-color;
   }
 }
 // corner case for secondary ghost button