feat: additional changes to #201 (#224)

* fix: calendar weight change

* feat: small color change

* feat: stories for logo

* feat: align the logo

* feat: stupid imports

* fix: eslint styling

* Update CalenderHeader.tsx

* Update colors.module.scss

* chore: remove argTypes

* chore: remove argTypes

* chore: remove argTypes

* fix: lock

* chore: styled up logo stories

---------

Co-authored-by: doprz <52579214+doprz@users.noreply.github.com>

src/stories/components/LogoIcon.stories.tsx

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { LargeLogo, SmallLogo } from '@views/components/common/LogoIcon';
+import React from 'react';
+
+const meta = {
+    title: 'Components/Common/Logo',
+    component: SmallLogo,
+    tags: ['autodocs'],
+} satisfies Meta<typeof SmallLogo>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Small: Story = {};
+
+export const Large: Story = {
+    render: args => <LargeLogo {...args} />,
+};

src/views/components/calendar/CalenderHeader.tsx

@@ -51,7 +51,7 @@ export default function CalendarHeader({ onSidebarToggle }: CalendarHeaderProps)
                     totalCourses={activeSchedule.courses.length}
                 />
                 <div className='flex items-center gap-1 screenshot:hidden'>
-                    <Text variant='mini' className='text-nowrap text-ut-gray font-normal'>
+                    <Text variant='mini' className='text-nowrap text-ut-gray font-normal!'>
                         DATA LAST UPDATED: {getUpdatedAtDateTimeString(activeSchedule.updatedAt)}
                     </Text>
                     <button className='inline-block h-4 w-4 bg-transparent p-0 btn'>

src/views/components/common/LogoIcon.tsx

@@ -28,7 +28,7 @@ export function SmallLogo({ className }: { className?: string }): JSX.Element {
     return (
         <div className={clsx('flex items-center gap-2', className)}>
             <LogoIcon />
-            <div className='flex flex-col text-lg font-medium leading-[1em]'>
+            <div className='flex flex-col text-lg font-medium leading-[1em] mt-1'>
                 <p className='text-nowrap text-ut-burntorange'>UT Registration</p>
                 <p className='text-ut-burntorange'>
                     Plus{' '}
@@ -51,7 +51,7 @@ export function LargeLogo({ className }: { className?: string }): JSX.Element {
     return (
         <div className={clsx('flex items-center gap-2', className)}>
             <LogoIcon className='h-12 w-12' />
-            <div className='hidden flex-col text-[1.35rem] font-medium leading-[1em] md:flex screenshot:flex'>
+            <div className='hidden flex-col text-[1.35rem] font-medium leading-[1em] md:flex screenshot:flex mt-1'>
                 <p className='text-nowrap text-ut-burntorange'>UT Registration</p>
                 <p className='text-ut-burntorange'>
                     Plus{' '}