From af23769d74f5affbcc2fab95da3631c372e73c74 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Thu, 23 Jun 2022 11:59:05 +0200
Subject: [PATCH] change(ui) - capitalize first letter

---
 .../Dashboard/components/WidgetWrapper/WidgetWrapper.tsx      | 2 +-
 frontend/app/components/ui/PageTitle/PageTitle.tsx            | 2 +-
 frontend/app/components/ui/SideMenuitem/SideMenuitem.js       | 2 +-
 frontend/app/styles/global.scss                               | 4 ++++
 4 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/frontend/app/components/Dashboard/components/WidgetWrapper/WidgetWrapper.tsx b/frontend/app/components/Dashboard/components/WidgetWrapper/WidgetWrapper.tsx
index da83150aa..505b674e2 100644
--- a/frontend/app/components/Dashboard/components/WidgetWrapper/WidgetWrapper.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetWrapper/WidgetWrapper.tsx
@@ -111,7 +111,7 @@ function WidgetWrapper(props: Props) {
                     <div
                         className={cn("p-3 pb-4 flex items-center justify-between", { "cursor-move" : !isTemplate && isWidget })}
                     >
-                        <div className="capitalize w-full font-medium">{widget.name}</div>
+                        <div className="capitalize-first w-full font-medium">{widget.name}</div>
                         {isWidget && (
                             <div className="flex items-center" id="no-print">
                                 {!isPredefined && isTimeSeries && (
diff --git a/frontend/app/components/ui/PageTitle/PageTitle.tsx b/frontend/app/components/ui/PageTitle/PageTitle.tsx
index 1692d977c..2fefafb8a 100644
--- a/frontend/app/components/ui/PageTitle/PageTitle.tsx
+++ b/frontend/app/components/ui/PageTitle/PageTitle.tsx
@@ -9,7 +9,7 @@ function PageTitle({ title, actionButton = null, subTitle = '', className = '',
     return (
         <div>
             <div className='flex items-center'>
-                <h1 className={cn("text-2xl", className)}>
+                <h1 className={cn("text-2xl capitalize-first", className)}>
                     {title}
                 </h1>
                 { actionButton && actionButton}
diff --git a/frontend/app/components/ui/SideMenuitem/SideMenuitem.js b/frontend/app/components/ui/SideMenuitem/SideMenuitem.js
index 70542063e..ffbd31cc4 100644
--- a/frontend/app/components/ui/SideMenuitem/SideMenuitem.js
+++ b/frontend/app/components/ui/SideMenuitem/SideMenuitem.js
@@ -43,7 +43,7 @@ function SideMenuitem({
                   <Icon name={ iconName } size={ iconSize } color={active ? 'teal' : iconColor} className="absolute" />
                 </div>
               )}
-              <span className={stl.title}>{ title }</span>
+              <span className={cn(stl.title, 'capitalize-first')}>{ title }</span>
            </div>
             { leading && leading }
           </div>
diff --git a/frontend/app/styles/global.scss b/frontend/app/styles/global.scss
index 2f427259c..086d884f0 100644
--- a/frontend/app/styles/global.scss
+++ b/frontend/app/styles/global.scss
@@ -2,4 +2,8 @@
     font-weight: 500;
     margin-bottom: 5px;
     color: '#888';
+}
+
+.capitalize-first::first-letter {
+    text-transform: uppercase;
 }
\ No newline at end of file