split EipFragment and MainButon into normal and custom flavor, implement new on-off button design for Bitmask

23 files changed, 336 insertions, 359 deletions

diff --git a/app/src/main/java/se/leap/bitmaskclient/base/views/MainButton.java b/app/src/main/java/se/leap/bitmaskclient/base/views/MainButton.java
deleted file mode 100644
index c5ac4544..00000000
--- a/app/src/main/java/se/leap/bitmaskclient/base/views/MainButton.java
+++ /dev/null
@@ -1,124 +0,0 @@
-package se.leap.bitmaskclient.base.views;
-
-import android.annotation.TargetApi;
-import android.content.Context;
-import android.graphics.PorterDuff;
-import android.graphics.drawable.AnimationDrawable;
-import android.util.AttributeSet;
-import android.view.LayoutInflater;
-import android.view.View;
-import android.view.animation.AlphaAnimation;
-import android.view.animation.Animation;
-import android.widget.RelativeLayout;
-
-import androidx.annotation.ColorRes;
-import androidx.annotation.DrawableRes;
-import androidx.appcompat.widget.AppCompatImageView;
-import androidx.core.content.ContextCompat;
-
-import se.leap.bitmaskclient.R;
-
-public class MainButton extends RelativeLayout {
-
-    private static final String TAG = MainButton.class.getSimpleName();
-
-    AppCompatImageView glow;
-    AppCompatImageView shadowLight;
-    AnimationDrawable glowAnimation;
-
-    private boolean isOn = false;
-    private boolean isProcessing = false;
-    private boolean isError = true;
-
-
-    public MainButton(Context context) {
-        super(context);
-        initLayout(context);
-    }
-
-    public MainButton(Context context, AttributeSet attrs) {
-        super(context, attrs);
-        initLayout(context);
-    }
-
-    public MainButton(Context context, AttributeSet attrs, int defStyleAttr) {
-        super(context, attrs, defStyleAttr);
-        initLayout(context);
-    }
-
-
-    @TargetApi(21)
-    public MainButton(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
-        super(context, attrs, defStyleAttr, defStyleRes);
-        initLayout(context);
-    }
-
-    private void initLayout(Context context) {
-        LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
-        View rootview = inflater.inflate(R.layout.v_main_btn, this, true);
-
-        glow = rootview.findViewById(R.id.vpn_btn_glow);
-        glowAnimation = (AnimationDrawable) glow.getBackground();
-        shadowLight = rootview.findViewById(R.id.vpn_btn_shadow_light);
-    }
-
-
-    private void stopGlowAnimation() {
-        AlphaAnimation fadeOutAnimation = new AlphaAnimation(1.0f, 0.0f);
-        fadeOutAnimation.setDuration(300);
-        fadeOutAnimation.setAnimationListener(new Animation.AnimationListener() {
-            @Override
-            public void onAnimationStart(Animation animation) {}
-
-            @Override
-            public void onAnimationEnd(Animation animation) {
-                glow.setVisibility(GONE);
-                glowAnimation.stop();
-            }
-
-            @Override
-            public void onAnimationRepeat(Animation animation) {}
-        });
-        glow.startAnimation(fadeOutAnimation);
-    }
-
-    private void startGlowAnimation() {
-        glow.setAlpha(1.0f);
-        glow.setVisibility(VISIBLE);
-        glowAnimation.start();
-    }
-
-    public void updateState(boolean isOn, boolean isProcessing, boolean isError) {
-        if (this.isOn != isOn) {
-            this.isOn = isOn;
-            shadowLight.setVisibility(isOn ? VISIBLE : GONE);
-        }
-
-        if (this.isProcessing != isProcessing) {
-            if (!isProcessing) {
-               stopGlowAnimation();
-            } else {
-                startGlowAnimation();
-            }
-            this.isProcessing = isProcessing;
-        }
-
-        if (this.isError != isError) {
-            @DrawableRes int drawableResource = isOn ? R.drawable.on_off_btn_start_2_enabled : R.drawable.on_off_btn_start_2_disabled;
-            if (!isError) {
-                setImageWithTint(shadowLight, drawableResource, R.color.colorMainBtnHighlight);
-            } else {
-                setImageWithTint(shadowLight, drawableResource, R.color.colorMainBtnError);
-            }
-            this.isError = isError;
-        }
-    }
-
-    private void setImageWithTint(AppCompatImageView view, @DrawableRes int resourceId, @ColorRes int color) {
-        view.setImageDrawable(ContextCompat.getDrawable(getContext(), resourceId));
-        view.setColorFilter(ContextCompat.getColor(getContext(), color), PorterDuff.Mode.SRC_ATOP);
-    }
-
-
-
-}
diff --git a/app/src/main/java/se/leap/bitmaskclient/base/views/VpnStateImage.java b/app/src/main/java/se/leap/bitmaskclient/base/views/VpnStateImage.java
deleted file mode 100644
index 2f8a4448..00000000
--- a/app/src/main/java/se/leap/bitmaskclient/base/views/VpnStateImage.java
+++ /dev/null
@@ -1,99 +0,0 @@
-/**
- * Copyright (c) 2018 LEAP Encryption Access Project and contributers
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with this program. If not, see <http://www.gnu.org/licenses/>.
- */
-package se.leap.bitmaskclient.base.views;
-
-import android.content.Context;
-import androidx.constraintlayout.widget.ConstraintLayout;
-import androidx.appcompat.widget.AppCompatImageView;
-import android.util.AttributeSet;
-import android.view.LayoutInflater;
-import android.view.View;
-import android.view.animation.AlphaAnimation;
-import android.view.animation.Animation;
-import android.widget.ProgressBar;
-
-import se.leap.bitmaskclient.R;
-
-/**
- * Created by cyberta on 12.02.18.
- */
-
-
-public class VpnStateImage extends ConstraintLayout {
-
-    ProgressBar progressBar;
-    AppCompatImageView stateIcon;
-
-    public VpnStateImage(Context context) {
-        super(context);
-        initLayout(context);
-    }
-
-    public VpnStateImage(Context context, AttributeSet attrs) {
-        super(context, attrs);
-        initLayout(context);
-    }
-
-    public VpnStateImage(Context context, AttributeSet attrs, int defStyleAttr) {
-        super(context, attrs, defStyleAttr);
-        initLayout(context);
-    }
-
-    void initLayout(Context context) {
-        LayoutInflater inflater = (LayoutInflater) context
-                .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
-        View rootview = inflater.inflate(R.layout.v_main_button, this, true);
-        stateIcon = rootview.findViewById(R.id.vpn_state_key);
-        progressBar = rootview.findViewById(R.id.progressBar);
-        progressBar.setIndeterminate(true);
-    }
-
-    public void showProgress() {
-        progressBar.setVisibility(VISIBLE);
-    }
-
-
-    public void stopProgress(boolean animated) {
-        if (!animated) {
-            progressBar.setVisibility(GONE);
-            return;
-        }
-
-        AlphaAnimation fadeOutAnimation = new AlphaAnimation(1.0f, 0.0f);
-        fadeOutAnimation.setDuration(1000);
-        fadeOutAnimation.setAnimationListener(new Animation.AnimationListener() {
-            @Override
-            public void onAnimationStart(Animation animation) {}
-
-            @Override
-            public void onAnimationEnd(Animation animation) {
-                progressBar.setVisibility(GONE);
-            }
-
-            @Override
-            public void onAnimationRepeat(Animation animation) {}
-        });
-        
-        progressBar.startAnimation(fadeOutAnimation);
-  }
-
-    public void setStateIcon(int resource) {
-        stateIcon.setImageResource(resource);
-    }
-
-
-}
diff --git a/app/src/main/res/drawable-hdpi/ic_btn_cancel.png b/app/src/main/res/drawable-hdpi/ic_btn_cancel.png
new file mode 100644
index 00000000..00feedcd
--- /dev/null
+++ b/app/src/main/res/drawable-hdpi/ic_btn_cancel.png
diff --git a/app/src/main/res/drawable-hdpi/ic_btn_on.png b/app/src/main/res/drawable-hdpi/ic_btn_on.png
new file mode 100644
index 00000000..2b37d25e
--- /dev/null
+++ b/app/src/main/res/drawable-hdpi/ic_btn_on.png
diff --git a/app/src/main/res/drawable-xhdpi/ic_btn_cancel.png b/app/src/main/res/drawable-xhdpi/ic_btn_cancel.png
new file mode 100644
index 00000000..d623f8f5
--- /dev/null
+++ b/app/src/main/res/drawable-xhdpi/ic_btn_cancel.png
diff --git a/app/src/main/res/drawable-xhdpi/ic_btn_on.png b/app/src/main/res/drawable-xhdpi/ic_btn_on.png
new file mode 100644
index 00000000..4fdc9464
--- /dev/null
+++ b/app/src/main/res/drawable-xhdpi/ic_btn_on.png
diff --git a/app/src/main/res/drawable-xxhdpi/ic_btn_cancel.png b/app/src/main/res/drawable-xxhdpi/ic_btn_cancel.png
new file mode 100644
index 00000000..af604d9b
--- /dev/null
+++ b/app/src/main/res/drawable-xxhdpi/ic_btn_cancel.png
diff --git a/app/src/main/res/drawable-xxhdpi/ic_btn_on.png b/app/src/main/res/drawable-xxhdpi/ic_btn_on.png
new file mode 100644
index 00000000..d6cfc10b
--- /dev/null
+++ b/app/src/main/res/drawable-xxhdpi/ic_btn_on.png
diff --git a/app/src/main/res/drawable-xxxhdpi/ic_btn_cancel.png b/app/src/main/res/drawable-xxxhdpi/ic_btn_cancel.png
new file mode 100644
index 00000000..6c17bd78
--- /dev/null
+++ b/app/src/main/res/drawable-xxxhdpi/ic_btn_cancel.png
diff --git a/app/src/main/res/drawable-xxxhdpi/ic_btn_on.png b/app/src/main/res/drawable-xxxhdpi/ic_btn_on.png
new file mode 100644
index 00000000..b0e54b8c
--- /dev/null
+++ b/app/src/main/res/drawable-xxxhdpi/ic_btn_on.png
diff --git a/app/src/main/res/drawable/button_circle_cancel.xml b/app/src/main/res/drawable/button_circle_cancel.xml
new file mode 100644
index 00000000..1d94abca
--- /dev/null
+++ b/app/src/main/res/drawable/button_circle_cancel.xml
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<selector xmlns:android="http://schemas.android.com/apk/res/android">
+    <item android:drawable="@drawable/button_circle_cancel_pressed" android:state_pressed="true"/>
+    <item android:drawable="@drawable/button_circle_cancel_released"/>
+</selector>
\ No newline at end of file
diff --git a/app/src/main/res/drawable/button_circle_cancel_pressed.xml b/app/src/main/res/drawable/button_circle_cancel_pressed.xml
new file mode 100644
index 00000000..13970e9f
--- /dev/null
+++ b/app/src/main/res/drawable/button_circle_cancel_pressed.xml
@@ -0,0 +1,64 @@
+<?xml version="1.0" encoding="utf-8"?>
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+  <!--  <item>
+        <shape android:shape="rectangle">
+            <solid android:color="@color/white"/>
+            <size android:width="250dp" android:height="250dp"/>
+        </shape>
+    </item> -->
+    <item
+        android:left="-23dp"
+        android:right="-23dp"
+        android:top="-8dp"
+        android:bottom="-8dp"
+        >
+        <animated-rotate
+            android:drawable="@drawable/rainbow_circle"
+            android:pivotX="50.0%"
+            android:pivotY="50.0%"
+            android:fromDegrees="0.0"
+            android:toDegrees="360.0"
+            >
+        </animated-rotate>
+    </item>
+    <item
+        android:top="18dp"
+        android:bottom="12dp"
+        >
+        <shape android:shape="oval">
+            <solid android:color="@color/btn_yellow_dark"/>
+            <size android:width="250dp" android:height="250dp" />
+        </shape>
+    </item>
+    <item
+        android:top="18dp"
+        android:bottom="12dp"
+        >
+        <shape
+            android:shape="ring"
+            android:innerRadius="125dp"
+            android:useLevel="false"
+            android:thickness="3dp">
+            <gradient
+                android:type="radial"
+                android:gradientRadius="125dp"
+                android:centerX="0.50"
+                android:centerY="0.54"
+                android:startColor="#000000"
+                android:centerColor="#000000"
+                android:endColor="@color/transparent" />
+
+        </shape>
+    </item>
+    <item
+        android:top="68dp"
+        android:bottom="62dp"
+        android:left="50dp"
+        android:right="50dp"
+        >
+        <bitmap android:src="@drawable/ic_btn_cancel"
+            />
+    </item>
+
+
+</layer-list>
\ No newline at end of file
diff --git a/app/src/main/res/drawable/button_circle_cancel_released.xml b/app/src/main/res/drawable/button_circle_cancel_released.xml
new file mode 100644
index 00000000..2e7bc4b7
--- /dev/null
+++ b/app/src/main/res/drawable/button_circle_cancel_released.xml
@@ -0,0 +1,62 @@
+<?xml version="1.0" encoding="utf-8"?>
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+   <!-- <item>
+        <shape android:shape="rectangle">
+            <solid android:color="@color/white"/>
+            <size android:width="250dp" android:height="250dp"/>
+        </shape>
+    </item>-->
+
+    <item
+        android:left="-23dp"
+        android:right="-23dp"
+        android:top="-8dp"
+        android:bottom="-8dp"
+        >
+        <animated-rotate
+            android:drawable="@drawable/rainbow_circle"
+            android:pivotX="50.0%"
+            android:pivotY="50.0%"
+            android:fromDegrees="0.0"
+            android:toDegrees="360.0"
+            >
+        </animated-rotate>
+    </item>
+   <item
+        android:bottom="15dp"
+        android:top="15dp"
+        >
+        <shape android:shape="oval">
+           <solid android:color="@color/btn_yellow"/>
+            <size android:width="250dp" android:height="250dp" />
+        </shape>
+    </item>
+    <item
+        android:bottom="15dp"
+        android:top="15dp"
+        >
+        <shape
+            android:shape="ring"
+            android:innerRadius="125dp"
+            android:useLevel="false"
+            android:thickness="10dp">
+            <gradient
+                android:type="radial"
+                android:gradientRadius="125dp"
+                android:centerX="0.51"
+                android:centerY="0.54"
+                android:startColor="#000000"
+                android:centerColor="#000000"
+                android:endColor="@color/transparent" />
+
+        </shape>
+    </item>
+    <item
+        android:top="65dp"
+        android:bottom="65dp"
+        android:left="50dp"
+        android:right="50dp"
+        >
+        <bitmap android:src="@drawable/ic_btn_cancel" />
+    </item>
+</layer-list>
\ No newline at end of file
diff --git a/app/src/main/res/drawable/button_circle_start.xml b/app/src/main/res/drawable/button_circle_start.xml
new file mode 100644
index 00000000..6d8482f4
--- /dev/null
+++ b/app/src/main/res/drawable/button_circle_start.xml
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<selector xmlns:android="http://schemas.android.com/apk/res/android">
+    <item android:drawable="@drawable/button_circle_start_pressed" android:state_pressed="true">
+    </item>
+    <item android:drawable="@drawable/button_circle_start_released">
+    </item>
+</selector>
\ No newline at end of file
diff --git a/app/src/main/res/drawable/button_circle_start_pressed.xml b/app/src/main/res/drawable/button_circle_start_pressed.xml
new file mode 100644
index 00000000..ce8eb8e1
--- /dev/null
+++ b/app/src/main/res/drawable/button_circle_start_pressed.xml
@@ -0,0 +1,47 @@
+<?xml version="1.0" encoding="utf-8"?>
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+   <!--<item>
+        <shape android:shape="rectangle">
+            <solid android:color="@color/white"/>
+            <size android:width="250dp" android:height="250dp"/>
+        </shape>
+    </item>-->
+    <item
+        android:top="18dp"
+        android:bottom="12dp"
+        >
+        <shape android:shape="oval">
+            <solid android:color="@color/btn_red_dark"/>
+            <size android:width="250dp" android:height="250dp" />
+        </shape>
+    </item>
+    <item
+        android:top="18dp"
+        android:bottom="12dp"
+        >
+        <shape
+            android:shape="ring"
+            android:innerRadius="125dp"
+            android:useLevel="false"
+            android:thickness="3dp">
+            <gradient
+                android:type="radial"
+                android:gradientRadius="125dp"
+                android:centerX="0.50"
+                android:centerY="0.54"
+                android:startColor="#000000"
+                android:centerColor="#000000"
+                android:endColor="@color/transparent" />
+
+        </shape>
+    </item>
+    <item
+        android:top="68dp"
+        android:bottom="62dp"
+        android:left="50dp"
+        android:right="50dp"
+        >
+        <bitmap android:src="@drawable/ic_btn_on"
+            />
+    </item>
+</layer-list>
\ No newline at end of file
diff --git a/app/src/main/res/drawable/button_circle_start_released.xml b/app/src/main/res/drawable/button_circle_start_released.xml
new file mode 100644
index 00000000..ce1ba997
--- /dev/null
+++ b/app/src/main/res/drawable/button_circle_start_released.xml
@@ -0,0 +1,46 @@
+<?xml version="1.0" encoding="utf-8"?>
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+    <!--<item>
+        <shape android:shape="rectangle">
+            <solid android:color="@color/white"/>
+            <size android:width="250dp" android:height="250dp"/>
+        </shape>
+    </item>-->
+   <item
+       android:bottom="15dp"
+       android:top="15dp"
+        >
+        <shape android:shape="oval">
+           <solid android:color="@color/btn_red"/>
+            <size android:width="250dp" android:height="250dp" />
+        </shape>
+    </item>
+    <item
+        android:bottom="15dp"
+        android:top="15dp"
+        >
+        <shape
+            android:shape="ring"
+            android:innerRadius="125dp"
+            android:useLevel="false"
+            android:thickness="10dp">
+            <gradient
+                android:type="radial"
+                android:gradientRadius="125dp"
+                android:centerX="0.51"
+                android:centerY="0.54"
+                android:startColor="#000000"
+                android:centerColor="#000000"
+                android:endColor="@color/transparent" />
+
+        </shape>
+    </item>
+    <item
+        android:top="65dp"
+        android:bottom="65dp"
+        android:left="50dp"
+        android:right="50dp"
+        >
+        <bitmap android:src="@drawable/ic_btn_on" />
+    </item>
+</layer-list>
\ No newline at end of file
diff --git a/app/src/main/res/drawable/button_circle_stop.xml b/app/src/main/res/drawable/button_circle_stop.xml
new file mode 100644
index 00000000..674cbf15
--- /dev/null
+++ b/app/src/main/res/drawable/button_circle_stop.xml
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<selector xmlns:android="http://schemas.android.com/apk/res/android">
+    <item android:drawable="@drawable/button_circle_stop_pressed" android:state_pressed="true"/>
+    <item android:drawable="@drawable/button_circle_stop_released"/>
+</selector>
\ No newline at end of file
diff --git a/app/src/main/res/drawable/button_circle_stop_pressed.xml b/app/src/main/res/drawable/button_circle_stop_pressed.xml
new file mode 100644
index 00000000..0561455a
--- /dev/null
+++ b/app/src/main/res/drawable/button_circle_stop_pressed.xml
@@ -0,0 +1,47 @@
+<?xml version="1.0" encoding="utf-8"?>
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+    <!--<item>
+        <shape android:shape="rectangle">
+            <solid android:color="@color/white"/>
+            <size android:width="250dp" android:height="250dp"/>
+        </shape>
+    </item>-->
+    <item
+        android:top="18dp"
+        android:bottom="12dp"
+        >
+        <shape android:shape="oval">
+            <solid android:color="@color/btn_green_dark"/>
+            <size android:width="250dp" android:height="250dp" />
+        </shape>
+    </item>
+    <item
+        android:top="18dp"
+        android:bottom="12dp"
+        >
+        <shape
+            android:shape="ring"
+            android:innerRadius="125dp"
+            android:useLevel="false"
+            android:thickness="3dp">
+            <gradient
+                android:type="radial"
+                android:gradientRadius="125dp"
+                android:centerX="0.51"
+                android:centerY="0.54"
+                android:startColor="#000000"
+                android:centerColor="#000000"
+                android:endColor="@color/transparent" />
+
+        </shape>
+    </item>
+    <item
+        android:top="68dp"
+        android:bottom="62dp"
+        android:left="50dp"
+        android:right="50dp"
+        >
+        <bitmap android:src="@drawable/ic_btn_cancel"
+            />
+    </item>
+</layer-list>
\ No newline at end of file
diff --git a/app/src/main/res/drawable/button_circle_stop_released.xml b/app/src/main/res/drawable/button_circle_stop_released.xml
new file mode 100644
index 00000000..2e168c2d
--- /dev/null
+++ b/app/src/main/res/drawable/button_circle_stop_released.xml
@@ -0,0 +1,46 @@
+<?xml version="1.0" encoding="utf-8"?>
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+    <!--<item>
+        <shape android:shape="rectangle">
+            <solid android:color="@color/white"/>
+            <size android:width="250dp" android:height="250dp"/>
+        </shape>
+    </item>-->
+   <item
+        android:bottom="15dp"
+       android:top="15dp"
+        >
+        <shape android:shape="oval">
+           <solid android:color="@color/btn_green"/>
+            <size android:width="250dp" android:height="250dp" />
+        </shape>
+    </item>
+    <item
+        android:bottom="15dp"
+        android:top="15dp"
+        >
+        <shape
+            android:shape="ring"
+            android:innerRadius="125dp"
+            android:useLevel="false"
+            android:thickness="10dp">
+            <gradient
+                android:type="radial"
+                android:gradientRadius="125dp"
+                android:centerX="0.51"
+                android:centerY="0.54"
+                android:startColor="#000000"
+                android:centerColor="#000000"
+                android:endColor="@color/transparent" />
+
+        </shape>
+    </item>
+    <item
+        android:top="65dp"
+        android:bottom="65dp"
+        android:left="50dp"
+        android:right="50dp"
+        >
+        <bitmap android:src="@drawable/ic_btn_cancel" />
+    </item>
+</layer-list>
\ No newline at end of file
diff --git a/app/src/main/res/drawable/ic_btn_cancel.png b/app/src/main/res/drawable/ic_btn_cancel.png
new file mode 100644
index 00000000..0b55460a
--- /dev/null
+++ b/app/src/main/res/drawable/ic_btn_cancel.png
diff --git a/app/src/main/res/drawable/ic_btn_on.png b/app/src/main/res/drawable/ic_btn_on.png
new file mode 100644
index 00000000..be160a33
--- /dev/null
+++ b/app/src/main/res/drawable/ic_btn_on.png
diff --git a/app/src/main/res/layout/v_main_button.xml b/app/src/main/res/layout/v_main_button.xml
deleted file mode 100644
index 741fc88f..00000000
--- a/app/src/main/res/layout/v_main_button.xml
+++ /dev/null
@@ -1,136 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<androidx.constraintlayout.widget.ConstraintLayout
-    xmlns:android="http://schemas.android.com/apk/res/android"
-    android:layout_width="match_parent"
-    android:layout_height="match_parent"
-    xmlns:app="http://schemas.android.com/apk/res-auto">
-
-
-    <androidx.constraintlayout.widget.Guideline
-        android:id="@+id/vpn_btn_guideline_left"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:orientation="vertical"
-        app:layout_constraintGuide_percent="0.125" />
-
-    <androidx.constraintlayout.widget.Guideline
-        android:id="@+id/vpn_btn_guideline_right"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:orientation="vertical"
-        app:layout_constraintGuide_percent="0.875" />
-
-    <androidx.constraintlayout.widget.Guideline
-        android:id="@+id/vpn_btn_guideline_top"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:orientation="horizontal"
-        app:layout_constraintGuide_percent="0.125" />
-
-    <androidx.constraintlayout.widget.Guideline
-        android:id="@+id/vpn_btn_guideline_bottom"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:orientation="horizontal"
-        app:layout_constraintGuide_percent="0.875" />
-
-
-    <androidx.constraintlayout.widget.Guideline
-        android:id="@+id/icn_guideline_left"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:orientation="vertical"
-        app:layout_constraintGuide_percent="0.2" />
-
-    <androidx.constraintlayout.widget.Guideline
-        android:id="@+id/icn_guideline_right"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:orientation="vertical"
-        app:layout_constraintGuide_percent="0.8" />
-
-    <androidx.constraintlayout.widget.Guideline
-        android:id="@+id/icn_guideline_top"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:orientation="horizontal"
-        app:layout_constraintGuide_percent="0.2" />
-
-    <androidx.constraintlayout.widget.Guideline
-        android:id="@+id/icn_guideline_bottom"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:orientation="horizontal"
-        app:layout_constraintGuide_percent="0.8" />
-
-   <androidx.constraintlayout.widget.Guideline
-        android:id="@+id/border_guideline_left"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:orientation="vertical"
-        app:layout_constraintGuide_percent="0.025" />
-
-    <androidx.constraintlayout.widget.Guideline
-        android:id="@+id/border_guideline_right"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:orientation="vertical"
-        app:layout_constraintGuide_percent="0.975" />
-
-    <androidx.constraintlayout.widget.Guideline
-        android:id="@+id/border_guideline_top"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:orientation="horizontal"
-        app:layout_constraintGuide_percent="0.025" />
-
-    <androidx.constraintlayout.widget.Guideline
-        android:id="@+id/border_guideline_bottom"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:orientation="horizontal"
-        app:layout_constraintGuide_percent="0.975" />
-
-
-    <ProgressBar
-        android:id="@+id/progressBar"
-        style="@style/Widget.AppCompat.ProgressBar.Horizontal"
-
-        android:layout_width="0dp"
-        android:layout_height="0dp"
-        app:layout_constraintBottom_toBottomOf="@id/border_guideline_bottom"
-        app:layout_constraintEnd_toEndOf="@id/border_guideline_right"
-        app:layout_constraintStart_toStartOf="@id/border_guideline_left"
-        app:layout_constraintTop_toTopOf="@id/border_guideline_top"
-        app:layout_constraintDimensionRatio="1:1"
-        android:indeterminate="true"
-        android:indeterminateDuration="800"
-        android:indeterminateDrawable="@drawable/progressbar_circle"
-        android:interpolator="@android:anim/decelerate_interpolator"
-        android:indeterminateBehavior="cycle"
-        />
-
-    <androidx.appcompat.widget.AppCompatImageView
-        android:id="@+id/circle"
-        android:layout_width="0dp"
-        android:layout_height="0dp"
-        app:layout_constraintBottom_toTopOf="@+id/vpn_btn_guideline_bottom"
-        app:layout_constraintEnd_toStartOf="@+id/vpn_btn_guideline_right"
-        app:layout_constraintStart_toStartOf="@+id/vpn_btn_guideline_left"
-        app:layout_constraintTop_toTopOf="@+id/vpn_btn_guideline_top"
-        app:layout_constraintDimensionRatio="1:1"
-        app:srcCompat="@drawable/black_circle" />
-
-    <androidx.appcompat.widget.AppCompatImageView
-        android:id="@+id/vpn_state_key"
-        android:layout_width="0dp"
-        android:layout_height="0dp"
-        app:layout_constraintBottom_toTopOf="@+id/icn_guideline_bottom"
-        app:layout_constraintEnd_toStartOf="@+id/icn_guideline_right"
-        app:layout_constraintStart_toStartOf="@+id/icn_guideline_left"
-        app:layout_constraintTop_toTopOf="@+id/icn_guideline_top"
-        app:layout_constraintDimensionRatio="1:1"
-        app:layout_constraintVertical_bias="0.35"
-        app:srcCompat="@drawable/ic_btn_on_disabled" />
-
-</androidx.constraintlayout.widget.ConstraintLayout>
\ No newline at end of file
diff --git a/app/src/main/res/values/colors.xml b/app/src/main/res/values/colors.xml
index 40b51436..dbc7326f 100644
--- a/app/src/main/res/values/colors.xml
+++ b/app/src/main/res/values/colors.xml
@@ -14,6 +14,7 @@
     <color name="black800_secondary">#3b3b3b</color>
     <color name="black800_transparent">#AA424242</color>
     <color name="black800_high_transparent">#22424242</color>
+    <color name="transparent">#00000000</color>
 
     <color name="red200">#ef9a9a</color>
     <color name="pink200">#f48fb1</color>
@@ -45,5 +46,11 @@
     <color name="colorLocationButtonTint">@color/black800</color>
     <color name="colorLocationButtonTintTransparent">@color/black800_high_transparent</color>
     <color name="colorWarning">#B33A3A</color>
+    <color name="btn_red">#FF7D7D</color>
+    <color name="btn_red_dark">#c84c51</color>
+    <color name="btn_yellow">#FFBF00</color>
+    <color name="btn_yellow_dark">#C78F00</color>
+    <color name="btn_green">#9FC17F</color>
+    <color name="btn_green_dark">#709152</color>
 
 </resources>