docs: change logo

Author: HerrTopi

full_logo.png

@@ -727,7 +727,7 @@ class App extends Component<AppProps, AppState> {
         minHeight="100vh"
         width="18.75rem"
       >
-        <View display="block" textAlign="end" margin="xx-small x-small none">
+        <View display="block" textAlign="end" margin="space4 space8 space12">
           <InstUISettingsProvider>
             <IconButton
               renderIcon={IconXSolid}
@@ -744,7 +744,7 @@ class App extends Component<AppProps, AppState> {
         </View>
 
         <Header
-          name={name === 'instructure-ui' ? 'Instructure UI' : name}
+          name={name === 'instructure-ui' ? 'v' : name}
           version={version}
           versionsData={versionsData}
         />

logo.png

@@ -38,6 +38,8 @@ import { versionInPath } from '../versionData'
 import { Heading } from '../Heading'
 import type { HeaderProps } from './props'
 import { propTypes, allowedProps } from './props'
+//@ts-expect-error ts complains for no real reason
+import logo from '../../full_logo.svg'
 
 class Header extends Component<HeaderProps> {
   static propTypes = propTypes
@@ -100,7 +102,8 @@ class Header extends Component<HeaderProps> {
               <Text size="large">
                 {name && version ? (
                   <span>
-                    {name} {version}
+                    {name}
+                    {version}
                   </span>
                 ) : (
                   'Documentation'
@@ -120,7 +123,7 @@ class Header extends Component<HeaderProps> {
             {allVersions.map((opt, index) => (
               <Menu.Item key={index} id={`opt-${index}`} value={opt}>
                 <View textAlign="center" as="div">
-                  {this.props.name} {opt}
+                  InstUI {opt}
                 </View>
               </Menu.Item>
             ))}
@@ -132,30 +135,10 @@ class Header extends Component<HeaderProps> {
 
   render() {
     const { versionsData } = this.props
-    const corpLogo = (
-      <InlineSVG viewBox="0 0 500 500" width="6rem" height="6rem">
-        <polygon
-          fill="#2A7BA0"
-          points="30.07,373.64 250.04,249.77 470,373.64 250.04,497.46 "
-        />
-        <polygon
-          fill="#FDCC10"
-          points="140.03,64.02 30.07,125.9 140.08,187.84 250.04,125.9 "
-        />
-        <polygon
-          fill="#F78F20"
-          points="249.99,2.08 140.08,63.97 250.04,125.9 359.99,64.02 "
-        />
-        <polygon
-          fill="#EB2227"
-          points="359.99,64.02 250.04,125.9 359.99,187.84 469.95,125.9 "
-        />
-      </InlineSVG>
-    )
-
+    const corpLogo = <InlineSVG width="200px" src={logo} />
     return (
       <View as="div" margin="none none medium" padding="none medium">
-        <Heading level="h2" as="div">
+        <Heading variant="titlePageDesktop" level="h2" as="div">
           <Link href="#index" isWithinText={false} display="block">
             <View display="block" textAlign="center">
               {corpLogo}
@@ -169,7 +152,8 @@ class Header extends Component<HeaderProps> {
               <Link href="#index" isWithinText={false} display="block">
                 <View display="block" margin="small none none">
                   <Text size="large">
-                    {this.props.name} {this.props.version}
+                    {this.props.name}
+                    {this.props.version}
                   </Text>
                 </View>
               </Link>

packages/__docs__/full_logo.svg

@@ -51,6 +51,8 @@ import { Heading } from '../Heading'
 
 import type { HeroProps } from './props'
 import { propTypes, allowedProps } from './props'
+//@ts-expect-error ts complains for no real reason
+import logo from '../../logo.svg'
 
 @withStyle(generateStyle, generateComponentTheme)
 class Hero extends Component<HeroProps> {
@@ -83,26 +85,7 @@ class Hero extends Component<HeroProps> {
   render() {
     const { version, layout, styles } = this.props
 
-    const corpLogo = (
-      <SVGIcon viewBox="0 0 500 500">
-        <polygon
-          fill="#2A7BA0"
-          points="30.07,373.64 250.04,249.77 470,373.64 250.04,497.46 "
-        />
-        <polygon
-          fill="#FDCC10"
-          points="140.03,64.02 30.07,125.9 140.08,187.84 250.04,125.9 "
-        />
-        <polygon
-          fill="#F78F20"
-          points="249.99,2.08 140.08,63.97 250.04,125.9 359.99,64.02 "
-        />
-        <polygon
-          fill="#EB2227"
-          points="359.99,64.02 250.04,125.9 359.99,187.84 469.95,125.9 "
-        />
-      </SVGIcon>
-    )
+    const corpLogo = <SVGIcon src={logo} />
 
     const canvasLogo = (
       <InlineSVG viewBox="0 0 792 220" width="239px" height="66px">

packages/__docs__/logo.svg

@@ -8,8 +8,9 @@
 
     <link
       rel="icon"
+      sizes="48x48"
       type="image/png"
-      href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAFS0lEQVR4Xu2aS2hjVRjH/ydp2knrOKnTVkZnIFOEtqnjA6tuVHCjK12pG4WmyDCiC62LQZpBozQp4qKiqIwiieJspgtBV7rxMaKoKcxouWkQ04BBh1ZnAk2TtvdxJMXobR73nnPvuScVerfnO9////3O6+bkEnTwqc6HaU0+OF0gnbLREeHqfFgH4Gso2ghOF/yyQUgFsDkffo4C81ZFEuDUgenCu7JASANQn+6shclaFp4D4C28EZDXIDwD4LZwWSCEA6jMhz8hwEOsU50njgILvdOFx3j62MUKA7D+xk2DXbq2aicoov0A1Q6T54tXROQSAkDPhCg0gu3vDonwZJuj/E4PoAGD+Zxr/64S7BTe8Gi/9MK43G1bhJOAra+7oF5qflVwA8IRAGMxtEIpwlZFbF8IOamxZR9aIdh43xoqpSgMreSO84pyAaCL/Y8blH7EI+IWRPnNHh65WuwTg/ncOdZOTADot0eDRne5wpq0VRwvCAeF75Ld3N7oPVYsVu082wJotc7tkrZrN/4MQMv2WXbfSHWDlm1tMVuw2x/aKumZ0DaAALMSR+DOaaHtltaLPlQ/9kSu5kwdzOdabiJNAIxM/3kK+ihHPY5D68vC7XRnNUAIFgZ+ze16kWoCoC/2vwpKT7MmdRPnnyjt6K8NjzQdp27ytutLQeaG8ssz5narJfAXgOu8MOLzo5/cXiqZc18Nh0Oar+eqF3oEuDKQzx1uldt2txG5CRLgG99E6V6rIteGRy4AuEcUCMeboNkA/QJdxsGQ6sZUfbqz5nC7LJbyRwL340vNTs92BpgTqJlDD/hAPrNLam7nLbwxNy8Ig5IHr19Z/pzVIxeAelI9E7oI4FYrEV8wcJCMr5VZjVjFrUYi15BNfd0qhgKXhvK523j1HAEwgWi63PQBL5GJ0iu8Rlji14ZHXwToyw2xxmA+5/gy1RUAE4jaMbbunyhdy1KI25jV4yNlQtBnt8Gx6AgBwCK0V2P2AezVkZHla38GyCK9V3X2Z8BeHRlZvvZngCzSrXQisfTOPYCSiHZsIDoiHImlDQCN2lRJRBu/GfB8fKQCGJtJvUUIedryRw2lb2eTU894Xvk/AlIA3BE/21tVezZ4igoGtvoW46dcXcWz6HkOoL7OWcy0ivF6f/AMgNvCG2F4BUI4gEgsvQRg3OmIW1960Fw2MTUqMrcwACfiqVFdJVmR5trl8hE1sjR7UoiWEACipzsrRBHLwhWAThUucn9wBGBsJl0hBEHWkZIRRymq2WS0l1eLC8DYTDpGCGZ5RaTGU8wpyeiuv7+s9JkAnHjhXL/uV4V8lCQLhmGQgeW5ydrfe5aPLYC9ss7tCmnXbrdRtgUwHktrFHB83+7UsFf92oFoAhCJpb8CcJ9XRjqal+JHJRm9y+yhCcDYmdSzhJLXO2rUI3FK6elscuo1SwD1xkgsXQRwo0de5KYluKzMRo+0Et3fBFmH4v92GiiBgh/xeO3myd0xaO49Fv/wZqIaP9sl7WS7D/qdS4knM6webJdAq0SRM+kFUDzCKiIp7lMlEX2YV8sRgH83ypnUJgjh/paV16RlPIWqJKOOv852BcB0Ykj5zK0RhN1bHgtoIQBqQpH4+W6olS0WUbcxlQANFuJTm27z1PoLA2BaFlEQkhJhrikHIU8ps5NnReYWDuC/ZfHB7wBt+fLBXwD5Q0lM3sDfz76HZwBE7Q8i1rkVBs8BOAXhdeF1X9IA1ARvib93VFMDv1mNSFdAPfZT/GTtd4iURyoA02z4HsCun6UAflAS0bulVG0S6QiAxmUha7q3gvs3FOidUHSrsQwAAAAASUVORK5CYII="
+      href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwBAMAAAClLOS0AAAAIGNIUk0AAHomAACAhAAA+gAAAIDoAAB1MAAA6mAAADqYAAAXcJy6UTwAAAAhUExURQYcMOzt75afqP///z4eL68hLHcfLeciKg8kN9ba3Z+nr/Cciq0AAAABYktHRAMRDEzyAAAAB3RJTUUH6QkICx4M5Jk2YQAAAEZJREFUOMtjYBgFuICgoBB2CWNjo1GJoS/hGuaAXaK8vASrBFt5eSlWCdby8nJcEth1sJSXl6GLc8ycOYuBga0U01WjAAYAf4oY5LYoa2EAAAAldEVYdGRhdGU6Y3JlYXRlADIwMjUtMDktMDhUMTE6MzA6MTArMDA6MDD/lM3MAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDI1LTA5LTA4VDExOjMwOjEwKzAwOjAwjsl1cAAAACh0RVh0ZGF0ZTp0aW1lc3RhbXAAMjAyNS0wOS0wOFQxMTozMDoxMiswMDowME5DRYYAAAAASUVORK5CYII="
     />
     <!-- font for canvas theme -->
     <link