Advanced UI Customization

This tutorial will guide you through advanced UI customization in the OADA UI project. You'll learn how to work with Tailwind CSS, create custom components, implement responsive design, and optimize performance.

Theme System

1. Tailwind Configuration

The project uses a custom Tailwind configuration with a comprehensive color system and responsive breakpoints. Here's how the theme is configured:

// tailwind.config.js
const base_colors = {
  background: "hsla(233, 100%, 4%, 1)",
  white: "hsla(0, 0%, 100%, 1)",
  black: "hsla(0, 0%, 0%, 1)",
  primary: "hsla(240, 94%, 68%, 1)",
  red: "hsla(3, 81%, 58%, 1)",
  yellow: "hsla(38, 80%, 67%, 1)",
  green: "hsla(138, 39%, 52%, 1)",
  purple: "hsla(241, 92%, 76%, 1)",
  transparent: "hsla(0, 0%, 0%, 0)",
};

module.exports = {
  content: ["src/**/*.{js,ts,jsx,tsx,mdx}"],
  theme: {
    extend: {
      screens: {
        xs: "420px",
        md: "840px",
        fold: "1200px",
      },
    },
    colors: {
      ui: {
        base: base_colors,
        brand: {
          gradient: {
            start: "hsla(250, 100%, 72%, 1)",
            end: "hsla(227, 100%, 62%, 1)",
          },
        },
        // ... other color configurations
      },
    },
  },
  plugins: [],
};

2. SCSS Variables and Mixins

The project uses SCSS variables for consistent styling across components:

// src/assets/_variables.scss
// Colors
$colorBaseBlack: #0c0c15;
$colorBaseWhite: #ffffff;
$colorGray200: #a3a3a3;
$colorOptimGray200: #bbbbbe;
$colorOptimGray700: #262626;
$colorOptimGray900: #151515;

// Typography
$fontXxs: 0.625rem;
$fontXs: 0.75rem;
$fontS: 0.875rem;
$fontM: 1rem;
$fontL: 1.25rem;
$fontXL: 1.5rem;

// Spacing
$gapNone: 0;
$gapXxxs: 0.25rem;
$gapXxs: 0.5rem;
$gapXs: 0.75rem;
$gapS: 1rem;
$gapM: 1.25rem;
$gapL: 1.625rem;

Component Styling

1. Button Component

The Button component demonstrates how to create reusable styled components:

// src/components/Button/index.module.scss
.button {
  border: none;
  border-radius: 24px;
  height: fit-content;
  color: $colorBaseWhite;
  min-height: 36px;
  max-width: 100%;
  overflow: hidden;
  padding: 0 14px;
  font-size: 14px;
  font-weight: 400;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  background: linear-gradient(90deg, #2853eb 0%, #9c95e9 100%);

  &.primary {
    background: $priBtnColor;
  }

  &.secondary {
    background: $colorShade100;
  }

  &.outlined {
    background: transparent;
    border: 1px solid $colorShade90;
  }
}

2. Typography System

The project uses a consistent typography system with predefined text styles:

// src/components/ui/typography.tsx
const textVariants = cva("text-sm", {
  variants: {
    size: {
      xlarge: "text-[24px] leading-[32px]",
      large: "text-[18px] leading-[24px]",
      medium: "text-[16px] leading-[24px]",
      small: "text-[14px] leading-[20px]",
      xsmall: "text-[12px] leading-[16px]",
    },
    tone: {
      muted: "text-ui-surface-sub",
      default: "text-ui-white",
    },
    weight: {
      semibold: "font-semibold",
      medium: "font-medium",
      normal: "font-normal",
    },
  },
  defaultVariants: {
    size: "small",
    tone: "default",
    weight: "normal",
  },
});

Responsive Design

1. Breakpoint System

The project uses a custom breakpoint system for responsive design:

// src/assets/_variables.scss
$breakpointLaptop: 1329px;
$breakpointTablet: 1027px;
$breakpointPhone: 767px;
$breakpointSmallPhone: 414px;

2. Responsive Components

Components use media queries for responsive behavior:

// src/features/Topbar/ConnectWallet/index.module.scss
.headerPanel {
  display: flex;
  flex-direction: row;
  gap: $gapS;
  text-align: left;
  border-radius: 12px;
  background: radial-gradient(
    86.72% 63.17% at 3.74% 100%,
    rgba(21, 38, 46, 0.35) 0%,
    #1a1a25 100%
  );
  padding: $gapLL;
  align-items: center;

  @media only screen and (max-width: $breakpointTablet) {
    margin-bottom: 16px;
    width: 100%;
  }
}

Performance Optimization

1. CSS Optimization

The project uses several techniques to optimize CSS:

// src/main.css
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Custom scrollbar styling */
::-webkit-scrollbar {
  width: 0px;
}

/* Optimize image loading */
img {
  max-width: 100%;
}

2. Component Optimization

Components are optimized for performance:

// src/utils/tailwind.ts
export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

Best Practices

1. Theme Customization

   • Use Tailwind's color system

   • Maintain consistent spacing

   • Follow typography scale

   • Use CSS modules for component-specific styles

2. Responsive Design

   • Use predefined breakpoints

   • Implement mobile-first approach

   • Test across devices

   • Handle edge cases

3. Component Styling

   • Use CSS modules for scoped styles

   • Follow BEM naming convention

   • Implement consistent variants

   • Document component styles

4. Performance

   • Minimize CSS bundle size

   • Use utility classes

   • Optimize images

   • Implement lazy loading

Next Steps

Now that you understand advanced UI customization, you can proceed to:

1. Testing and Quality Assurance

2. Deployment and CI/CD

Additional Resources

• Tailwind CSS Documentation

• SCSS Documentation

• CSS Modules Documentation

• Responsive Design Best Practices