fixed spacing: created composable

README.md

@@ -1,13 +1,12 @@
 
-
-[![Qodana](https://github.com/droidconKE/chai/actions/workflows/qodana.yml/badge.svg)](https://github.com/droidconKE/chai/actions/workflows/qodana.yml)
 [![Chai CI 🍵](https://github.com/droidconKE/chai/actions/workflows/main.yml/badge.svg)](https://github.com/droidconKE/chai/actions/workflows/main.yml)
 
 
 <p align="center">
   <a href="https://github.com/droidconKE/droidconKE2022Android">
     <img src="https://raw.githubusercontent.com/droidconKE/iconPack/master/images/chaicover.png" alt="Chai Design Logo" width=330 height=150>
   </a>
+</p>
 
 ## Chai Design System
 ---

chai/src/main/java/com/droidconke/chai/utils/Spacing.kt

@@ -15,8 +15,43 @@
  */
 package com.droidconke.chai.utils
 
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.height
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
 
-public val Space5 = 5.dp
-public val Space15 = 5.dp
-public val Space30 = 30.dp
+/*
+* these are units of spacing that can be used in the app.
+* Use these in padding and margin:
+*
+* Usage:
+* .padding(horizontal = Space15, vertical = Space30)
+
+*/
+val Space5 = 5.dp
+val Space15 = 15.dp
+val Space30 = 30.dp
+
+/*
+ * These are spacers that can be used in the app.
+ * Mostly relevant in rows and columns
+ * Usage:
+ * Spacer30()
+ *
+
+*/
+@Composable
+fun Spacer5(){
+    Spacer(Modifier.height(Space5))
+}
+
+@Composable
+fun Spacer15() {
+    Spacer(Modifier.height(Space15))
+}
+@Composable
+fun Spacer30() {
+    Spacer(Modifier.height(Space30))
+}
+

chaidemo/src/main/java/com/droidconke/chaidemo/ChaiDemoMainScreen.kt

@@ -1,9 +1,7 @@
 package com.droidconke.chaidemo
 
 import androidx.compose.foundation.background
-import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.*
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.tooling.preview.Preview
@@ -13,6 +11,7 @@ import com.droidconke.chai.components.CPageTitle
 import com.droidconke.chai.components.CParagraph
 import com.droidconke.chai.utils.Space15
 import com.droidconke.chai.utils.Space30
+import com.droidconke.chai.utils.Spacer30
 
 @Preview(showBackground = true)
 @Composable
@@ -24,11 +23,9 @@ fun ChaiDemoMainScreen() {
                 .background(color = ChaiWhite)
                 .padding(horizontal = Space15, vertical = Space30)
         ) {
-            Space30
             CPageTitle("chai demo main screen")
-            Space30
+            Spacer30()
             CParagraph(dParagraph = "This is the main screen of the chai demo app.")
-
         }
     }
-}
+}