updated vertical alignment, and sizing for the logo (#762)

influxdata · Apr 21, 2022 · 6be6400 · 6be6400
1 parent 54293dc
commit 6be6400
Show file tree

Hide file tree

Showing 12 changed files with 43 additions and 38 deletions.
diff --git a/src/Components/Logo/InfluxLogo.scss b/src/Components/Logo/InfluxLogo.scss
@@ -3,12 +3,15 @@
     ----------------------------------------------------------------------------
 */
 
-.cf-logo--influx {
-    display: inline-flex;
-    align-items: center;
-    align-content: flex-start;
-    max-height: 45px;
-    flex-wrap: wrap;
+.cf-centered-logomark {
+    margin-left: calc(50% - 54px);
+    transform: translateX(-50%);
+}
+
+.cf-flex-break {
+    width: 100%;
+    max-width: 530px;
+    margin-top: 4px;
 }
 
 .cf-logo {
@@ -17,14 +20,16 @@
     clip-rule: evenodd;
 }
 
-.cf-flex-break {
-    width: 100%;
-    max-width: 530px;
-    margin-top: 4px;
+.cf-logo--influx {
+    display: inline-flex;
+    align-items: flex-start;
+    align-content: flex-start;
+    max-height: 45px;
+    flex-wrap: wrap;
 }
 
-.cf-centered-logomark {
-    margin-left: calc(50% - 40px);
-    transform: translateX(-50%);
+.cf-logo-size {
+    max-height: 45px;
 }
+
 
diff --git a/src/Components/Logo/InfluxLogo.tsx b/src/Components/Logo/InfluxLogo.tsx
@@ -60,7 +60,7 @@ export const InfluxLogo = forwardRef<InfluxLogoRef, InfluxLogoProps>(
     },
     ref
   ) => {
-    const logoClass = classnames('cf-logo--influx', {
+    const logoClass = classnames('cf-logo--influx cf-logo-size', {
       [`${className}`]: className,
     })
 

diff --git a/src/Components/Logo/Logos/AuxiliaryText/Cloud.tsx b/src/Components/Logo/Logos/AuxiliaryText/Cloud.tsx
@@ -25,11 +25,11 @@ export const Cloud = forwardRef<CloudRef, CloudProps>(
     },
     ref
   ) => {
-    const logoClass = classnames('cf-logo', {
+    const logoClass = classnames('cf-logo cf-logo-auxiliary', {
       [`${className}`]: className,
     })
 
-    const logoStyle = {fill, marginTop: '1px'}
+    const logoStyle = {fill, marginTop: '4.5px', marginLeft: '14px'}
 
     return (
       <svg
@@ -40,8 +40,8 @@ export const Cloud = forwardRef<CloudRef, CloudProps>(
         x="0px"
         y="0px"
         viewBox="0 0 258 84"
-        width="112"
-        height="33"
+        width="96"
+        height="31"
         ref={ref}
       >
         <path

diff --git a/src/Components/Logo/Logos/AuxiliaryText/Enterprise.tsx b/src/Components/Logo/Logos/AuxiliaryText/Enterprise.tsx
@@ -25,11 +25,11 @@ export const Enterprise = forwardRef<EnterpriseRef, EnterpriseProps>(
     },
     ref
   ) => {
-    const logoClass = classnames('cf-logo', {
+    const logoClass = classnames('cf-logo cf-logo-auxiliary', {
       [`${className}`]: className,
     })
 
-    const logoStyle = {fill, marginTop: '12px'}
+    const logoStyle = {fill, marginTop: '6.5px', marginLeft: '14px'}
 
     return (
       <svg
@@ -40,8 +40,8 @@ export const Enterprise = forwardRef<EnterpriseRef, EnterpriseProps>(
         x="0px"
         y="0px"
         viewBox="0 0 496 102"
-        width="210"
-        height="42"
+        width="183"
+        height="37.5"
         ref={ref}
       >
         <path

diff --git a/src/Components/Logo/Logos/AuxiliaryText/OpenSource.tsx b/src/Components/Logo/Logos/AuxiliaryText/OpenSource.tsx
@@ -29,7 +29,7 @@ export const OpenSource = forwardRef<OpenSourceRef, OpenSourceProps>(
       [`${className}`]: className,
     })
 
-    const logoStyle = {fill, marginTop: '22px'}
+    const logoStyle = {fill, marginTop: '15.5px', marginLeft: '14px'}
 
     return (
       <svg
@@ -40,8 +40,8 @@ export const OpenSource = forwardRef<OpenSourceRef, OpenSourceProps>(
         x="0px"
         y="0px"
         viewBox="0 0 588 77"
-        width="250"
-        height="32"
+        width="222"
+        height="29"
         ref={ref}
       >
         <path

diff --git a/src/Components/Logo/Logos/BaseText/InfluxData.tsx b/src/Components/Logo/Logos/BaseText/InfluxData.tsx
@@ -29,7 +29,7 @@ export const InfluxData = forwardRef<InfluxDataRef, InfluxDataProps>(
       [`${className}`]: className,
     })
 
-    const logoStyle = {fill}
+    const logoStyle = {fill, marginTop: '4.5px'}
 
     return (
       <svg
@@ -40,8 +40,8 @@ export const InfluxData = forwardRef<InfluxDataRef, InfluxDataProps>(
         x="0px"
         y="0px"
         viewBox="0 0 505 82"
-        width="240"
-        height="35"
+        width="191"
+        height="31"
         ref={ref}
       >
         <path

diff --git a/src/Components/Logo/Logos/BaseText/InfluxDb.tsx b/src/Components/Logo/Logos/BaseText/InfluxDb.tsx
@@ -28,7 +28,7 @@ export const InfluxDb = forwardRef<InfluxDbRef, InfluxDbProps>(
       [`${className}`]: className,
     })
 
-    const logoStyle = {fill}
+    const logoStyle = {fill, marginTop: '4.5px'}
 
     return (
       <svg
@@ -39,8 +39,8 @@ export const InfluxDb = forwardRef<InfluxDbRef, InfluxDbProps>(
         x="0px"
         y="0px"
         viewBox="0 0 417 84"
-        width="190"
-        height="35"
+        width="154"
+        height="31"
         ref={ref}
       >
         <path

diff --git a/src/Components/Logo/Logos/BaseText/Telegraf.tsx b/src/Components/Logo/Logos/BaseText/Telegraf.tsx
@@ -29,7 +29,7 @@ export const Telegraf = forwardRef<TelegrafRef, TelegrafProps>(
       [`${className}`]: className,
     })
 
-    const logoStyle = {fill, marginTop: '11px'}
+    const logoStyle = {fill, marginTop: '2px'}
 
     return (
       <svg
@@ -40,7 +40,7 @@ export const Telegraf = forwardRef<TelegrafRef, TelegrafProps>(
         x="0px"
         y="0px"
         viewBox="0 0 407 108"
-        width="182"
+        width="162"
         height="43"
         ref={ref}
       >

diff --git a/src/Components/Logo/Logos/Logomarks/Kubo.tsx b/src/Components/Logo/Logos/Logomarks/Kubo.tsx
@@ -45,7 +45,7 @@ export const Kubo = forwardRef<KuboRef, KuboProps>(
         y="0px"
         className={centeredClassName}
         viewBox="0 0 154 156"
-        width="60"
+        width="80"
         height="45"
         ref={ref}
       >

diff --git a/src/Components/Logo/Logos/Logomarks/KuboOld.tsx b/src/Components/Logo/Logos/Logomarks/KuboOld.tsx
@@ -45,7 +45,7 @@ export const KuboOld = forwardRef<KuboOldRef, KuboOldProps>(
         x="0px"
         y="0px"
         viewBox="0 0 188 190"
-        width="55"
+        width="75"
         height="45"
         ref={ref}
       >

diff --git a/src/Components/Logo/Logos/Symbols/Registered.tsx b/src/Components/Logo/Logos/Symbols/Registered.tsx
@@ -29,7 +29,7 @@ export const Registered = forwardRef<RegisteredRef, RegisteredProps>(
       [`${className}`]: className,
     })
 
-    const logoStyle = {fill, marginBottom: '13px'}
+    const logoStyle = {fill}
 
     return (
       <svg
@@ -40,7 +40,7 @@ export const Registered = forwardRef<RegisteredRef, RegisteredProps>(
         x="0px"
         y="0px"
         viewBox="0 0 42 42"
-        width="31"
+        width="32"
         height="21"
         ref={ref}
       >

diff --git a/src/Components/Logo/Logos/Symbols/Trademark.tsx b/src/Components/Logo/Logos/Symbols/Trademark.tsx
@@ -40,7 +40,7 @@ export const Trademark = forwardRef<TrademarkRef, TrademarkProps>(
         x="0px"
         y="0px"
         viewBox="0 0 56 28"
-        width="38"
+        width="40"
         height="14"
         ref={ref}
       >
-Original file line number
+Diff line change
@@ Expand Up @@
         },
         ref
       ) => {
-        const logoClass = classnames('cf-logo--influx', {
+        const logoClass = classnames('cf-logo--influx cf-logo-size', {
           [`${className}`]: className,
         })
@@ Expand Down @@