changed calenders columnlayout to column and tried to add theme colors to combobpx but failed with it

qml/calculator/CalculatorStartPage.qml

@@ -138,7 +138,7 @@ Page {
             id: startButton
             text: "start"
             height: parent.width * 0.1
-            font.pixelSize: parent.width * 0.075
+            font.pixelSize: parent.width * 0.0625
             anchors {
                 left: parent.left
                 right: parent.right

qml/calender/CalenderGameOverPage.qml

@@ -1,6 +1,7 @@
 import QtQuick 2.11
 import QtQuick.Controls 2.4
 import "./"
+import "../components"
 
 Page {
     id: root
@@ -34,20 +35,18 @@ Page {
         width: childrenRect.width
         spacing: parent.width * 0.1
 
-        RoundButton {
+        GameButton {
             id: homeButton
             height: root.width * 0.2
-            width: height
             text: "home"
             onClicked: {
                 game.start()
             }
         }
 
-        RoundButton {
+        GameButton {
             id: startButtons
             height: root.width * 0.2
-            width: height
             text: "start"
             onClicked: {
                 calender.start()

qml/calender/CalenderRunningPage.qml

@@ -14,7 +14,7 @@ Page {
     Label {
         id: date
         anchors.centerIn: parent
-        font.pixelSize: parent.height * 0.2
+        font.pixelSize: parent.width * 0.2
         text: calender.nextDate
         visible: calender.runningPageState ? true:false
         color: settings.theme("PageTextColor")
@@ -91,10 +91,88 @@ Page {
     }
 
     ComboBox {
-        id: comboBox
+        id: dateBox
         model: ["None", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"]
         anchors.centerIn: parent
         visible: calender.runningPageState ? false:true
+
+        indicator: Canvas {
+            id: canvas
+            x: dateBox.width - width - dateBox.rightPadding
+            y: dateBox.topPadding + (dateBox.availableHeight - height) / 2
+            width: 12
+            height: 8
+            contextType: "2d"
+
+            Connections {
+                target: dateBox
+                onPressedChanged: canvas.requestPaint()
+            }
+
+            onPaint: {
+                context.reset();
+                context.moveTo(0, 0);
+                context.lineTo(width, 0);
+                context.lineTo(width / 2, height);
+                context.closePath();
+                context.fillStyle = dateBox.pressed ? "#17a81a" : "#21be2b";
+                context.fill();
+            }
+        }
+
+        delegate: ItemDelegate {
+            width: dateBox.width
+            contentItem: Text {
+            text: modelData
+            color: "green"
+            font: dateBox.font
+            elide: Text.ElideRight
+            verticalAlignment: Text.AlignVCenter
+            }
+            highlighted: dateBox.highlightedIndex === index
+        }
+
+        contentItem: Text {
+            leftPadding: 10 // should be in reference to width
+            rightPadding: dateBox.indicator.width + dateBox.spacing
+
+            text: dateBox.displayText
+            font: dateBox.font
+            color: "red"
+            verticalAlignment: Text.AlignVCenter
+            elide: Text.ElideRight
+        }
+
+        background: Rectangle {
+            border.color: settings.theme("ComboBoxBorderColor")
+            border.width: settings.theme("ComboBoxBorderWidth")
+            radius: settings.theme("ComboBoxRadius")
+        }
+
+        popup: Popup {
+                y: dateBox.height - 1
+                width: dateBox.width
+                implicitHeight: contentItem.implicitHeight
+                padding: 1
+
+                contentItem: ListView {
+                    clip: true
+                    implicitHeight: contentHeight
+                    model: dateBox.popup.visible ? dateBox.delegateModel : null
+                    currentIndex: dateBox.highlightedIndex
+
+                    ScrollIndicator.vertical: ScrollIndicator { }
+                }
+
+                background: Rectangle {
+                    border.color: "blue"
+                    border.width: 10
+                    color: "yellow"
+                    radius: 0
+                }
+            }
+
+
         onCurrentTextChanged: {
             if (currentIndex !== 0) {
                 if (currentIndex === calender.weekDay) {
@@ -131,7 +209,7 @@ Page {
 
         onTriggered: {
             calender.runningPageState = false
-            comboBox.currentIndex = 0
+            dateBox.currentIndex = 0
         }
 
         onRunningChanged: {

qml/calender/CalenderStartPage.qml

@@ -2,6 +2,7 @@ import QtQuick 2.11
 import QtQuick.Controls 2.4
 import QtQuick.Layouts 1.3
 import "./"
+import "../components"
 
 Page {
     id: root
@@ -12,9 +13,12 @@ Page {
         color: settings.theme("PageBackgroundColor")
     }
 
-    ColumnLayout {
+    property int itemHeight: heading.height + tickIntervalInfo.height + tickInterval.height + numCountInfo.height + numCount.height + minInfo.height + min.height + maxInfo.height + max.height + startButton.height
+    property int columnItems: 10
+
+    Column {
         id: column
-        //spacing: height / 40
+        spacing: (column.height - itemHeight) / columnItems
         width: parent.width
         anchors.fill: parent
         anchors.topMargin: parent.height * 0.02
@@ -22,20 +26,22 @@ Page {
 
         Label {
             id: heading
-            font.pixelSize: parent.width * 0.075
+            font.pixelSize: parent.width * 0.125
             text: "Calender"
             color: settings.theme("PageTextColor")
-            Layout.fillWidth: true
+            anchors {
-            Layout.leftMargin: parent.width * 0.5 - width * 0.5
+                horizontalCenter: parent.horizontalCenter
-            Layout.rightMargin: parent.width * 0.5 - width * 0.5
+            }
         }
 
         Label {
             id: tickIntervalInfo
             text: "Interval:"
-            font.pixelSize: parent.height * 0.05
             color: settings.theme("PageTextColor")
-            Layout.leftMargin: parent.width * 0.05
+            font.pixelSize: parent.height * 0.05
+            anchors {
+                horizontalCenter: parent.horizontalCenter
+            }
         }
 
 
@@ -45,18 +51,23 @@ Page {
             placeholderText: "interval"
             validator: IntValidator {bottom: 1; top: 1000000;}
             horizontalAlignment: Qt.AlignHCenter
-            Layout.fillWidth: true
+            anchors {
-            Layout.leftMargin: parent.width * 0.05
+                left: parent.left
-            Layout.rightMargin: parent.width * 0.05
+                right: parent.right
+                leftMargin: parent.width * 0.05
+                rightMargin: parent.width * 0.05
+            }
             Keys.onReturnPressed: root.start()
         }
 
         Label {
             id: dateCountInfo
             text: "Dates:"
-            font.pixelSize: parent.height * 0.05
             color: settings.theme("PageTextColor")
-            Layout.leftMargin: parent.width * 0.05
+            font.pixelSize: parent.height * 0.05
+            anchors {
+                horizontalCenter: parent.horizontalCenter
+            }
         }
 
         TextField {
@@ -64,20 +75,24 @@ Page {
             text: calender.dateCount
             placeholderText: "dates"
             validator: IntValidator {bottom: 1; top: 100000;}
-            color: settings.theme("PageTextColor")
             horizontalAlignment: Qt.AlignHCenter
-            Layout.fillWidth: true
+            anchors {
-            Layout.leftMargin: parent.width * 0.05
+                left: parent.left
-            Layout.rightMargin: parent.width * 0.05
+                right: parent.right
+                leftMargin: parent.width * 0.05
+                rightMargin: parent.width * 0.05
+            }
             Keys.onReturnPressed: root.start()
         }
 
         Label {
             id: minInfo
             text: "Minimum:"
-            font.pixelSize: parent.height * 0.05
             color: settings.theme("PageTextColor")
-            Layout.leftMargin: parent.width * 0.05
+            font.pixelSize: parent.height * 0.05
+            anchors {
+                horizontalCenter: parent.horizontalCenter
+            }
         }
 
         TextField {
@@ -86,18 +101,23 @@ Page {
             placeholderText: "minimum"
             validator: IntValidator {bottom: 1800; top: 10000;}
             horizontalAlignment: Qt.AlignHCenter
-            Layout.fillWidth: true
+            anchors {
-            Layout.leftMargin: parent.width * 0.05
+                left: parent.left
-            Layout.rightMargin: parent.width * 0.05
+                right: parent.right
+                leftMargin: parent.width * 0.05
+                rightMargin: parent.width * 0.05
+            }
             Keys.onReturnPressed: root.start()
         }
 
         Label {
             id: maxInfo
             text: "Maximum:"
-            font.pixelSize: parent.height * 0.05
             color: settings.theme("PageTextColor")
-            Layout.leftMargin: parent.width * 0.05
+            font.pixelSize: parent.height * 0.05
+            anchors {
+                horizontalCenter: parent.horizontalCenter
+            }
         }
 
         TextField {
@@ -106,21 +126,26 @@ Page {
             placeholderText: "maximum"
             validator: IntValidator {bottom: 1800; top: 10000;}
             horizontalAlignment: Qt.AlignHCenter
-            Layout.fillWidth: true
+            anchors {
-            Layout.leftMargin: parent.width * 0.05
+                left: parent.left
-            Layout.rightMargin: parent.width * 0.05
+                right: parent.right
+                leftMargin: parent.width * 0.05
+                rightMargin: parent.width * 0.05
+            }
             Keys.onReturnPressed: root.start()
         }
 
-        RoundButton {
+        GameButton {
             id: startButton
             text: "start"
             height: parent.width * 0.1
-            width: height
+            font.pixelSize: parent.width * 0.0625
-            //font.pixelSize: parent.width * 0.03
+            anchors {
-            Layout.fillWidth: true
+                left: parent.left
-            Layout.leftMargin: parent.width * 0.05
+                right: parent.right
-            Layout.rightMargin: parent.width * 0.05
+                leftMargin: parent.width * 0.05
+                rightMargin: parent.width * 0.05
+            }
             onClicked: {
                 root.start()
             }

shared/themes/default.ini

@@ -6,3 +6,7 @@ ButtonBackgroundColor=black
 ButtonTextColor=white
 ButtonBorderWidth=0
 ButtonBorderColor=
+
+ComboBoxBorderColor=black
+ComboBoxBorderWidth=1
+ComboBoxRadius=0