Update Dimensions & Shapes

Signed-off-by: Sanju S <spikeysanju98@gmail.com>
Spikeysanju · Nov 26, 2021 · d150bc3 · d150bc3
1 parent 825e6fa
commit d150bc3
Show file tree

Hide file tree

Showing 22 changed files with 157 additions and 101 deletions.
diff --git a/.idea/misc.xml b/.idea/misc.xml
diff --git a/app/src/main/java/dev/spikeysanju/einsen/components/BottomCTA.kt b/app/src/main/java/dev/spikeysanju/einsen/components/BottomCTA.kt
@@ -74,12 +74,17 @@ fun BottomCTA(
         contentAlignment = Alignment.Center
     ) {
         Row(
-            modifier = modifier.padding(top = 12.dp, bottom = 12.dp, start = 16.dp, end = 16.dp),
+            modifier = modifier.padding(
+                top = AppTheme.dimensions.paddingLarge,
+                bottom = AppTheme.dimensions.paddingLarge,
+                start = AppTheme.dimensions.paddingXL,
+                end = AppTheme.dimensions.paddingXL
+            ),
             horizontalArrangement = Arrangement.SpaceAround,
             verticalAlignment = Alignment.CenterVertically
         ) {
             ActionIcons(onEdit = { onEdit() }, onDelete = { onDelete() }, onShare = { onShare() })
-            Spacer(modifier = modifier.width(12.dp))
+            Spacer(modifier = modifier.width(AppTheme.dimensions.paddingLarge))
 
             Row(modifier = modifier.fillMaxWidth(), Arrangement.End) {
                 PrimaryButtonWithIcon(

diff --git a/app/src/main/java/dev/spikeysanju/einsen/components/Button.kt b/app/src/main/java/dev/spikeysanju/einsen/components/Button.kt
@@ -56,7 +56,7 @@ fun PrimaryButton(modifier: Modifier = Modifier, title: String, onclick: () -> U
             .fillMaxWidth()
             .height(54.dp)
             .clip(RoundedCornerShape(60.dp))
-            .padding(start = 20.dp, end = 20.dp),
+            .padding(start = AppTheme.dimensions.paddingXL, end = AppTheme.dimensions.paddingXL),
         onClick = { onclick() },
         colors = ButtonDefaults.buttonColors(
             backgroundColor = AppTheme.colors.primary,
@@ -100,7 +100,7 @@ fun PrimaryButtonWithIcon(
             tint = Color.White
         )
 
-        Spacer(modifier = modifier.width(12.dp))
+        Spacer(modifier = modifier.width(AppTheme.dimensions.paddingLarge))
 
         Text(
             text = title,
@@ -124,7 +124,7 @@ fun ButtonPreview() {
             color = AppTheme.colors.primary
         )
 
-        Spacer(modifier = Modifier.height(12.dp))
+        Spacer(modifier = Modifier.height(AppTheme.dimensions.paddingLarge))
 
         PrimaryButton(title = "Save Task") {
             // onclick action goes here

diff --git a/app/src/main/java/dev/spikeysanju/einsen/components/ChipView.kt b/app/src/main/java/dev/spikeysanju/einsen/components/ChipView.kt
@@ -36,7 +36,6 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.tooling.preview.Preview
-import androidx.compose.ui.unit.dp
 import dev.spikeysanju.einsen.ui.theme.apptheme.AppTheme
 
 /**
@@ -55,11 +54,17 @@ fun ChipView(
             .wrapContentWidth()
             .animateContentSize()
             .clickable(onClick = onClick)
-            .clip(RoundedCornerShape(12.dp))
+            .clip(RoundedCornerShape(AppTheme.shapes.shapeLarge))
             .background(AppTheme.colors.primary)
     ) {
         Text(
-            text = title, modifier = modifier.padding(12.dp, 6.dp, 12.dp, 6.dp),
+            text = title,
+            modifier = modifier.padding(
+                AppTheme.dimensions.paddingLarge,
+                AppTheme.dimensions.paddingSmall,
+                AppTheme.dimensions.paddingLarge,
+                AppTheme.dimensions.paddingSmall
+            ),
             style = AppTheme.typography.overline,
             color = AppTheme.colors.white
         )
@@ -83,12 +88,17 @@ fun SmallChipView(
             .wrapContentWidth()
             .animateContentSize()
             .clickable(onClick = onClick)
-            .clip(RoundedCornerShape(12.dp))
+            .clip(RoundedCornerShape(AppTheme.shapes.shapeLarge))
             .background(color = color.copy(0.10F))
     ) {
         Text(
             text = title,
-            modifier = modifier.padding(start = 6.dp, end = 6.dp, top = 4.dp, bottom = 4.dp),
+            modifier = modifier.padding(
+                start = AppTheme.dimensions.paddingSmall,
+                end = AppTheme.dimensions.paddingSmall,
+                top = AppTheme.dimensions.paddingSmall,
+                bottom = AppTheme.dimensions.paddingSmall
+            ),
             style = MaterialTheme.typography.overline,
             color = color
         )

diff --git a/app/src/main/java/dev/spikeysanju/einsen/components/DashboardCard.kt b/app/src/main/java/dev/spikeysanju/einsen/components/DashboardCard.kt
@@ -28,7 +28,6 @@ import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.layout.wrapContentWidth
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.Text
@@ -39,7 +38,6 @@ import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Brush
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.tooling.preview.Preview
-import androidx.compose.ui.unit.dp
 import dev.spikeysanju.einsen.ui.theme.apptheme.AppTheme
 import dev.spikeysanju.einsen.utils.coloredShadow
 
@@ -62,21 +60,21 @@ fun DashboardCardItem(
 ) {
     val gradientBrush = Brush.verticalGradient(listOf(color.copy(.8F), color), startY = 10F)
 
-    Spacer(modifier = modifier.height(AppTheme.dimensions.paddingExtraLarge))
+    Spacer(modifier = modifier.height(AppTheme.dimensions.paddingXXL))
 
     Row(
         modifier = modifier
             .fillMaxWidth()
-            .padding(start = 16.dp, end = 16.dp)
+            .padding(start = AppTheme.dimensions.paddingXL, end = AppTheme.dimensions.paddingXL)
             .coloredShadow(
                 color,
                 alpha = 0.4F,
-                borderRadius = AppTheme.dimensions.paddingExtraLarge,
+                borderRadius = AppTheme.dimensions.paddingXXL,
                 shadowRadius = AppTheme.dimensions.paddingMedium,
-                offsetX = 0.dp,
-                offsetY = 4.dp
+                offsetX = AppTheme.dimensions.paddingNone,
+                offsetY = AppTheme.dimensions.paddingSmall
             )
-            .clip(RoundedCornerShape(24.dp))
+            .clip(RoundedCornerShape(AppTheme.shapes.shapeXL))
             .background(brush = gradientBrush)
             .clickable {
                 onClick()
@@ -87,14 +85,17 @@ fun DashboardCardItem(
         Column(
             modifier = modifier
                 .wrapContentWidth()
-                .padding(top = 36.dp, bottom = 36.dp)
+                .padding(
+                    top = AppTheme.dimensions.paddingXXXL,
+                    bottom = AppTheme.dimensions.paddingXXXL
+                )
                 .align(Alignment.CenterVertically)
         ) {
             Text(text = title, style = AppTheme.typography.h2, color = Color.White)
-            Spacer(modifier = modifier.height(16.dp))
+            Spacer(modifier = modifier.height(AppTheme.dimensions.paddingXL))
             Text(text = description, style = AppTheme.typography.subtitle, color = Color.White)
         }
-        Spacer(modifier = modifier.width(16.dp))
+        Spacer(modifier = modifier.height(AppTheme.dimensions.paddingXL))
         Text(text = count, style = AppTheme.typography.bigTitle, color = Color.White)
     }
 }
@@ -113,7 +114,7 @@ fun DashboardPreview() {
         ) {
             // click action goes here
         }
-        Spacer(modifier = Modifier.height(12.dp))
+        Spacer(modifier = Modifier.height(AppTheme.dimensions.paddingLarge))
         DashboardCardItem(
             title = "Decide when to do",
             description = "Important not Urgent",
@@ -123,7 +124,7 @@ fun DashboardPreview() {
             // click action goes here
         }
 
-        Spacer(modifier = Modifier.height(12.dp))
+        Spacer(modifier = Modifier.height(AppTheme.dimensions.paddingLarge))
         DashboardCardItem(
             title = "Delegate it",
             description = "Urgent not Important",
@@ -133,7 +134,7 @@ fun DashboardPreview() {
             // click action goes here
         }
 
-        Spacer(modifier = Modifier.height(12.dp))
+        Spacer(modifier = Modifier.height(AppTheme.dimensions.paddingLarge))
         DashboardCardItem(
             title = "Dump it",
             description = "Not Important & Not Urgent",

diff --git a/app/src/main/java/dev/spikeysanju/einsen/components/InfoCard.kt b/app/src/main/java/dev/spikeysanju/einsen/components/InfoCard.kt
@@ -38,7 +38,6 @@ import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.Preview
-import androidx.compose.ui.unit.dp
 import dev.spikeysanju.einsen.R
 import dev.spikeysanju.einsen.ui.theme.apptheme.AppTheme
 
@@ -52,7 +51,7 @@ import dev.spikeysanju.einsen.ui.theme.apptheme.AppTheme
 fun InfoCard(title: String, value: String, modifier: Modifier) {
     Box(
         modifier = modifier
-            .clip(RoundedCornerShape(12.dp))
+            .clip(RoundedCornerShape(AppTheme.shapes.shapeLarge))
             .background(color = AppTheme.colors.card)
             .padding(
                 AppTheme.dimensions.paddingLarge

diff --git a/app/src/main/java/dev/spikeysanju/einsen/components/ItemProjectCard.kt b/app/src/main/java/dev/spikeysanju/einsen/components/ItemProjectCard.kt
@@ -48,16 +48,18 @@ fun ItemWorkspaceCard(
     Card(
         modifier = modifier
             .fillMaxWidth()
-            .padding(12.dp)
+            .padding(AppTheme.dimensions.paddingLarge)
             .clickable {
                 onCardClick()
             },
-        backgroundColor = AppTheme.colors.card, shape = RoundedCornerShape(24.dp), elevation = 0.dp
+        backgroundColor = AppTheme.colors.card,
+        shape = RoundedCornerShape(AppTheme.shapes.shapeXL),
+        elevation = 0.dp
     ) {
         Column(
             modifier = modifier
                 .fillMaxWidth()
-                .padding(24.dp),
+                .padding(AppTheme.dimensions.paddingXXL),
             horizontalAlignment = Alignment.Start
         ) {
             EmojiTextView(emoji = emoji)
@@ -69,7 +71,7 @@ fun ItemWorkspaceCard(
                 style = AppTheme.typography.caption,
                 color = AppTheme.colors.text
             )
-            Spacer(modifier = modifier.height(16.dp))
+            Spacer(modifier = modifier.height(AppTheme.dimensions.paddingXL))
             SmallChipView(title = tag, color = AppTheme.colors.information) {
                 onChipViewClick()
             }

diff --git a/app/src/main/java/dev/spikeysanju/einsen/components/TextInput.kt b/app/src/main/java/dev/spikeysanju/einsen/components/TextInput.kt
@@ -43,7 +43,6 @@ import androidx.compose.ui.platform.LocalFocusManager
 import androidx.compose.ui.text.input.ImeAction
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.Preview
-import androidx.compose.ui.unit.dp
 import dev.spikeysanju.einsen.ui.theme.apptheme.AppTheme
 
 /**
@@ -86,7 +85,10 @@ fun EinsenInputTextField(
         TextField(
             modifier = modifier
                 .fillMaxWidth()
-                .padding(start = 20.dp, end = 20.dp),
+                .padding(
+                    start = AppTheme.dimensions.paddingXL,
+                    end = AppTheme.dimensions.paddingXL
+                ),
             value = value,
             readOnly = readOnly,
             enabled = enabled,
@@ -136,7 +138,11 @@ fun EinsenInputTextField(
                 errorMessage,
                 style = AppTheme.typography.caption,
                 color = AppTheme.colors.error,
-                modifier = modifier.padding(top = 12.dp, start = 16.dp, end = 16.dp)
+                modifier = modifier.padding(
+                    top = AppTheme.dimensions.paddingLarge,
+                    start = AppTheme.dimensions.paddingXL,
+                    end = AppTheme.dimensions.paddingLarge
+                )
             )
         }
     }
@@ -156,7 +162,10 @@ fun EinsenInputTextFieldWithoutHint(
         TextField(
             modifier = modifier
                 .fillMaxWidth()
-                .padding(start = 20.dp, end = 20.dp),
+                .padding(
+                    start = AppTheme.dimensions.paddingXL,
+                    end = AppTheme.dimensions.paddingXL
+                ),
             value = value,
             onValueChange = {
                 onValueChanged(it)
@@ -200,7 +209,7 @@ fun TextInputPreview() {
             }
         )
 
-        Spacer(modifier = Modifier.height(12.dp))
+        Spacer(modifier = Modifier.height(AppTheme.dimensions.paddingLarge))
 
         EinsenInputTextFieldWithoutHint(
             title = "Description", value = "Einsen Architecture is really cool!",

diff --git a/app/src/main/java/dev/spikeysanju/einsen/ui/theme/apptheme/AppTheme.kt b/app/src/main/java/dev/spikeysanju/einsen/ui/theme/apptheme/AppTheme.kt
@@ -27,6 +27,8 @@ import dev.spikeysanju.einsen.ui.theme.color.AppColors
 import dev.spikeysanju.einsen.ui.theme.color.LocalColors
 import dev.spikeysanju.einsen.ui.theme.dimensions.AppDimensions
 import dev.spikeysanju.einsen.ui.theme.dimensions.LocalDimensions
+import dev.spikeysanju.einsen.ui.theme.shape.AppShapes
+import dev.spikeysanju.einsen.ui.theme.shape.LocalShapes
 import dev.spikeysanju.einsen.ui.theme.typography.AppTypography
 import dev.spikeysanju.einsen.ui.theme.typography.LocalTypography
 
@@ -56,6 +58,14 @@ object AppTheme {
         @ReadOnlyComposable
         get() = LocalDimensions.current
 
+    /**
+     * Get [LocalShapes] from the AppShapes
+     */
+    val shapes: AppShapes
+        @Composable
+        @ReadOnlyComposable
+        get() = LocalShapes.current
+
     /**
      * [Einsen] application custom theme
      */
@@ -64,6 +74,7 @@ object AppTheme {
         colors: AppColors = AppTheme.colors,
         typography: AppTypography = AppTheme.typography,
         dimensions: AppDimensions = AppTheme.dimensions,
+        shapes: AppShapes = AppTheme.shapes,
         content: @Composable () -> Unit
     ) {
 
@@ -77,7 +88,8 @@ object AppTheme {
         CompositionLocalProvider(
             LocalColors provides rememberColors,
             LocalTypography provides typography,
-            LocalDimensions provides dimensions
+            LocalDimensions provides dimensions,
+            LocalShapes provides shapes
         ) {
             content()
         }

diff --git a/app/src/main/java/dev/spikeysanju/einsen/ui/theme/color/AppColors.kt b/app/src/main/java/dev/spikeysanju/einsen/ui/theme/color/AppColors.kt
@@ -181,4 +181,4 @@ fun darkColors(
     isLight = false
 )
 
-val LocalColors = staticCompositionLocalOf { lightColors() }
+internal val LocalColors = staticCompositionLocalOf { lightColors() }
diff --git a/app/src/main/java/dev/spikeysanju/einsen/ui/theme/dimensions/AppDimensions.kt b/app/src/main/java/dev/spikeysanju/einsen/ui/theme/dimensions/AppDimensions.kt
@@ -24,10 +24,13 @@ import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 
 data class AppDimensions(
+    val paddingNone: Dp = 0.dp,
     val paddingSmall: Dp = 4.dp,
     val paddingMedium: Dp = 8.dp,
     val paddingLarge: Dp = 12.dp,
-    val paddingExtraLarge: Dp = 24.dp
+    val paddingXL: Dp = 16.dp,
+    val paddingXXL: Dp = 24.dp,
+    val paddingXXXL: Dp = 36.dp
 )
 
 internal val LocalDimensions = staticCompositionLocalOf { AppDimensions() }
diff --git a/...pikeysanju/einsen/ui/theme/shape/Shape.kt → ...ysanju/einsen/ui/theme/shape/AppShapes.kt b/...pikeysanju/einsen/ui/theme/shape/Shape.kt → ...ysanju/einsen/ui/theme/shape/AppShapes.kt
@@ -19,12 +19,15 @@
 
 package dev.spikeysanju.einsen.ui.theme.shape
 
-import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material.Shapes
+import androidx.compose.runtime.staticCompositionLocalOf
+import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 
-val Shapes = Shapes(
-    small = RoundedCornerShape(4.dp),
-    medium = RoundedCornerShape(4.dp),
-    large = RoundedCornerShape(12.dp),
+data class AppShapes(
+    val shapeSmall: Dp = 4.dp,
+    val shapeMedium: Dp = 8.dp,
+    val shapeLarge: Dp = 12.dp,
+    val shapeXL: Dp = 24.dp
 )
+
+internal val LocalShapes = staticCompositionLocalOf { AppShapes() }
diff --git a/app/src/main/java/dev/spikeysanju/einsen/ui/theme/typography/AppTypography.kt b/app/src/main/java/dev/spikeysanju/einsen/ui/theme/typography/AppTypography.kt
@@ -87,4 +87,4 @@ data class AppTypography(
 
 )
 
-val LocalTypography = staticCompositionLocalOf { AppTypography() }
+internal val LocalTypography = staticCompositionLocalOf { AppTypography() }